基于jQ+CSS3页面滚动内容元素动画特效

浏览数：35 / 时间：2015年06月09日

今天给大家分享一款基于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 &amp; 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>