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

Question

想要缩小 o zooming zoom out images 我正在尝试从 CSS 和普通 jQuery 函数效果 onscroll 但不工作。

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

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

非常感谢任何帮助。

Answer 1

对于视差滚动效果，最好的办法是使用具有 3 或 4 层的简单 CSS 动画，将背景从 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);