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

Question

想要缩小缩小图像我正在尝试从CSS和普通的jQuery函数效果onscroll但不能正常工作。

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

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

任何帮助都非常适合。

Answer 1

对于视差滚动效果，最好的办法是使用3或4层的简单CSS动画，将背景设置为0到100％的动画，如example或此one所示< / p>

@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);