[英]Parallax scroll background image auto zoomin and zoomout
Want to out o zooming zoom out images I am trying it from CSS and normal jQuery function effect onscroll but not working. 我想从CSS和普通的jQuery函数效果滚动来尝试缩放图像,但无法正常工作。
Scroll I am adding CSS for zooming but it's not zooming out. 滚动我正在添加CSS进行缩放,但没有缩小。
http://ucanedu.in/uraban/#home http://ucanedu.in/uraban/#home
Any help is greatly appriciated. 任何帮助都非常有用。
For a parallax scroll effect, your best bet is to use a simple CSS animation with 3 or 4 layers, animating the background from 0 to 100% as shown in this example or this one 对于视差滚动效果,最好的办法是使用一个简单的CSS动画用3或4层,动画从0到100%的背景如本例或该一个
@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
animation: animatedBackground 80s linear infinite;
For a CSS animation zoom in and out, this is not really a parallax effect, it is just zooming in and out, for this you could use a css transition on the container element as shown in this example 对于CSS动画放大和缩小,这并不是真正的视差效果,它只是放大和缩小,为此,您可以在容器元素上使用css过渡,如本示例所示
transition:All 1s ease;
transform: scale(3) translateX(120px);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.