我想创建一个由skrollr控制的水平动画。向下滚动时,页面元素必须从容器的左侧移动到右侧。
假设我的元素都有相同的宽度,我设置滚动数据从100%到0%,它可以工作。
但是如果我的图片宽度不同怎么办?此外,我想保留透明度动画,以创建淡入淡出效果。
以下是HTML代码:
<div id="container">
<div class="bg" style="background-color:red"
data-0="transform:translate3d(0%,0%,0); opacity:1"
data-5000="transform:translate3d(-100%,0%,0); opacity:0">
</div>
<div class="bg" style="background-color:green;"
data-0="transform:translate3d(100%,0%,0); opacity:0"
data-5000="transform:translate3d(0%,0%,0);opacity:1"
data-10000="transform:translate3d(-100%,0%,0);opacity:0">
</div>
<div class="bg" style="background-color:orange"
data-5000="transform:translate3d(100%,0%,0); opacity:0"
data-10000="transform:translate3d(0%,0%,0); opacity:1">
</div>
</div>
以下是CSS代码:
#container {
background-color:black;
width:500px;
height:300px;
overflow:hidden;
}
div {
position:fixed;
}
.bg {
width:500px;
height:300px;
}