今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效。这是一款基于jQuery+CSS3实现的页面滚动代码。该实例适用于适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
在线预览 源码下载
实现的代码。
html代码：
<div class="htmleaf-container"> <div class="container"> <h2 class="font-zh"> 向下滚动页面看看效果！</h2> </div> <div class="container"> <h2> Use Smoove to create smooth fade-in effects as you scroll down</h2> <div class="row"> <div class="col-md-6"> <div class="block"> </div> </div> <div class="col-md-6"> <div class="block"> </div> </div> </div> <h2> You can also move objects across the screen...</h2> <div class="row"> <div class="col-md-3"> <div class="block" data-move-y="200px" data-move-x="-200px"> </div> </div> <div class="col-md-3"> <div class="block" data-move-y="200px" data-move-x="-100px"> </div> </div> <div class="col-md-3"> <div class="block" data-move-y="200px" data-move-x="100px"> </div> </div> <div class="col-md-3"> <div class="block" data-move-y="200px" data-move-x="200px"> </div> </div> </div> <h2> ...or rotate them</h2> <div class="row"> <div class="col-md-3"> <div class="block" data-move-x="-500px" data-rotate="90deg"> </div> </div> <div class="col-md-3"> <div class="block" data-move-y="200px" data-move-x="-200px" data-rotate="45deg"> </div> </div> <div class="col-md-3"> <div class="block" data-move-y="200px" data-move-x="200px" data-rotate="-45deg"> </div> </div> <div class="col-md-3"> <div class="block" data-move-x="500px" data-rotate="-90deg"> </div> </div> </div> <h2> Even use cool 3D effects</h2> <div class="row"> <div class="col-md-4"> <div class="block" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px"> </div> </div> <div class="col-md-4"> <div class="block" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px"> </div> </div> <div class="col-md-4"> <div class="block" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px"> </div> </div> </div> <div class="row"> <div class="col-md-3"> <div class="block" data-rotate-y="180deg" data-move-z="-200px" data-move-x="-300px"> </div> </div> <div class="col-md-3"> <div class="block" data-rotate-x="180deg" data-rotate-y="180deg" data-move-z="-700px"> </div> </div> <div class="col-md-3"> <div class="block" data-rotate-x="180deg" data-rotate-y="45deg" data-move-z="-500px"> </div> </div> <div class="col-md-3"> <div class="block" data-rotate-y="180deg" data-move-z="-100px" data-move-x="500px"> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="block" data-rotate-y="270deg" data-move-x="-150%"> </div> </div> <div class="col-md-6"> <div class="block" data-rotate-y="270deg" data-move-x="150%"> </div> </div> </div> <h2> Scale & skew them...</h2> <div class="row"> <div class="col-md-6"> <div class="block" data-scale="5"> </div> </div> <div class="col-md-6"> <div class="block" data-scale="0.2" data-skew="90deg,90deg"> </div> </div> </div> <h2> Mix it up!</h2> </div> </div>
via：http://www.w2bc.com/Article/27243
