Based on jQ CSS3 page scrolling content element animation special effects_html/css_WEB-ITnose

Today I will share with you a special animation effect for scrolling content elements based on jQ CSS3 page. This is a page scrolling code based on jQuery CSS3. This example is applicable to applicable browsers: 360, FireFox, Chrome, Safari, Opera, Maxthon, Sogou, and World Window. IE8 and below browsers are not supported.

Online preview Source code download

The implemented code.

html code:

  <div class="htmleaf-container">        <div class="container">            <h2 id="向下滚动页面看看效果">                向下滚动页面看看效果！</h2>        </div>        <div class="container">            <h2 id="Use-Smoove-to-create-smooth-fade-in-effects-as-you-scroll-down">                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 id="You-can-also-move-objects-across-the-screen">                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 id="or-rotate-them">                ...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 id="Even-use-cool-D-effects">                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 id="Scale-amp-skew-them">                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 id="Mix-it-up">                Mix it up!</h2>        </div>    </div>

via: http://www.w2bc.com/Article/27243