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

Parallax scroll background image auto zoomin and zoomout

本文关键字：放大 缩小 滚动 背景 图像 视差      更新时间：2023-09-26

想要缩小或缩小图像，我正在从CSS和普通的jQuery函数效果中尝试，但不起作用。

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

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

任何帮助都将不胜感激。

对于视差滚动效果，最好使用一个简单的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);
相关文章：