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

Question

想要放大缩小图像我试图从CSS和正常的jQuery函数效果onscroll，但不工作。

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

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

任何帮助是极大的appriciated。

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