如何制作这种显示样式

Question

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

这是一个示例示例

<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/
• 根据滚动位置淡入元素：使用 css 向下滚动时淡入元素

• 他们正在应用转换过渡以淡入从左侧淡入元素。他们正在使用transform： translateX（[PX值]）来完成这个。这是他们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);
    }
  }