视差滚动背景图像自动放大和缩小

Question

我想从CSS和普通的jQuery函数效果滚动来尝试缩放图像，但无法正常工作。

滚动我正在添加CSS进行缩放，但没有缩小。

http://ucanedu.in/uraban/#home

任何帮助都非常有用。

Answer 1

对于视差滚动效果，最好的办法是使用一个简单的CSS动画用3或4层，动画从0到100％的背景如本例或该一个

@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

animation: animatedBackground 80s linear infinite;

对于CSS动画放大和缩小，这并不是真正的视差效果，它只是放大和缩小，为此，您可以在容器元素上使用css过渡，如本示例所示

transition:All 1s ease;
transform: scale(3) translateX(120px);