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

Question

想要缩小，缩放，缩小图像，我正在尝试它从CSS和正常的jQuery函数效果滚动，但不起作用。

滚动我正在添加用于缩放的CSS，但它不能缩小。

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

任何帮助都会得到极大的重视。

Answer 1

对于一个视差滚动效果，你最好的选择是使用一个简单的CSS动画与3或4层，动画的背景从0到100%，如此example或此one所示

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

animation: animatedBackground 80s linear infinite;

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

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