Question

看一下this网站。当你向下滚动时，内容会从左到右显示动画。这背后的代码是什么？

这是一个示例

<div id="a"style="width:200px;height:400px">
<img src="home_v3_img_3.jpg" width="200px" height="400px"/>
</div>
<div id="b"style="width:200px;height:400px">
<img src="home_v3_img_3.jpg" width="200px" height="400px"/>
</div>
<div id="c"style="width:200px;height:400px">
<img src="home_v3_img_3.jpg" width="200px" height="400px"/>
</div>
<div id="d"style="width:100%;height:400px;display:none; ">
<img src="home_v3_img_3.jpg" width="200px" height="400px" style="float: left;"/>
<img src="home_v3_img_3.jpg" width="200px" height="400px"style="float: left;"/>
<img src="home_v3_img_3.jpg" width="200px" height="400px"style="float: left;"/>
<img src="home_v3_img_3.jpg" width="200px" height="400px" style="float: left;"/>
<img src="home_v3_img_3.jpg" width="200px" height="400px" style="float: left;"/>
<img src="home_v3_img_3.jpg" width="200px" height="400px" style="float: left;"/>

</div>

由于

Answer 1

有一些事情正在发生，这里有一个总结：

他们正在监听窗口上滚动事件的更改，并且当用户向下滚动页面时，在各种HTML元素上添加/更改类。通过添加或更改类，这会触发各种CSS3转换，例如不透明度更改，位置更改等。其中一些转换以统一的形式发生，这就是为什么当您将各种内容滚动到页面时，页面似乎从左侧淡入元素图。

一些有用的链接/资源来实现这一目标：

使用jQuery监听窗口滚动事件：http://api.jquery.com/scroll/
根据滚动位置淡化元素：Fade in element on scroll down using css

他们正在应用变换过渡来淡化左边的元素。他们正在使用transform：translateX（[PX value]）来实现这一目标。以下是他们的CSS代码：

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

如何制作这种展示风格

1 个答案: