<分区>
我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。
关闭 8 年前。
看看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>
谢谢
最佳答案
有多种事情正在发生，这里是一个总结:
它们监听窗口滚动事件的变化，当用户向下滚动页面时，在各种 HTML 元素上添加/更改类。通过添加或更改类，这会触发各种 CSS3 转换，例如不透明度更改、位置更改等。其中一些转换统一发生，这就是为什么当您将各种内容滚动到页面中时，页面似乎从左侧淡入元素查看。
完成此操作的一些有用链接/资源:
他们正在应用变换过渡以从左侧淡入元素。他们正在使用 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);
}
}
关于jquery - 如何制作这种展示风格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27884128/
相关文章：
jquery - 在 ajax 帖子中设置 Rails session
jquery - 更改滚动背景时 css 和 webkit 出现故障
html - 如何将 Bootstrap 菜单设置为在移动设备上可见的元素
javascript - 多个时间间隔的jquery图像 slider
javascript - 如何确定 IE 中动态加载图像的 img 宽度/高度？
javascript - jquery 帮助 css() 和 animate()
javascript - 从在 angularJs 中动态创建的输入中查找总数