Nowadays there is a trend of using animated page elements where as you scroll down the page, items animates. Animated page elements provides a more extraordinary user experience.<\/p>\n
Here we will be building UI elements which will animate into view as the user scrolls down the page. The animation will be performed by CSS3 while scrolling will be done by jQuery.<\/p>\n
To start off, let\u2019s create a html layout of the page.<\/p>\n
[html]
\n<div id="wrapper">
\n <img src="http:\/\/placehold.it\/750×300" \/>
\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
\nSed faucibus, augue ac maximus auctor, dui elit ornare libero,
\nat maximus sem mauris lacinia eros. Pellentesque turpis dolor,
\n aliquet eu eros vitae, congue volutpat orci. Nullam vel vulputate
\n odio. Sed vestibulum felis vel convallis consequat.
\n Cras a lacinia ante.
\n <\/p>
\n <div class="notAnimated animateBlock leftAlign left">
\n <img src="http:\/\/placehold.it\/382×152" alt="apple devices">
\n <\/div>
\n <div id="Txt" class="notAnimated animateBlock rightAlign right">
\n <h3>Lorem ipsum<\/h3>
\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
\n faucibus, augue ac maximus auctor, dui elit ornare libero, at maximus
\n sem mauris lacinia eros. Pellentesque turpis dolor, aliquet eu eros
\nvitae, congue volutpat orci. Nullam vel vulputate
\n odio. Sed vestibulum felis vel convallis consequat. Cras a lacinia
\n ante.
\n <\/p>
\n <\/div>
\n <div class="notAnimated animateBlock right">
\n <img src="http:\/\/placehold.it\/750×400" alt="white iphone flat ui">
\n <\/div>
\n<\/div>
\n<!– wrapper –>
\n<script src="https:\/\/code.jquery.com\/jquery-1.12.0.js"><\/script>
\n[\/html]<\/p>\n
Now that the HTML is in place, we can use CSS to arrange, animate and decorate each element.<\/p>\n
[css]
\n* {
\n margin: 0;
\n padding: 0;
\n}<\/p>\n
html {
\n overflow-y: scroll;
\n}<\/p>\n
body {
\n background: #f0f0f0;
\n color: #000;
\n}<\/p>\n
img {
\n border: 0;
\n max-width: 100%;
\n}<\/p>\n
#wrapper {
\n display: block;
\n width: 750px;
\n margin: 0 auto;
\n padding-top: 30px;
\n padding-bottom: 45px;
\n}<\/p>\n
.rightAlign {
\n float: right;
\n}<\/p>\n
.leftAlign {
\n float: left;
\n}<\/p>\n
.animateBlock {
\n margin-top: 20px;
\n display: inline-block;
\n opacity: 0;
\n filter: alpha(opacity=0);
\n position: relative;
\n -webkit-transition: all .55s ease-in;
\n -moz-transition: all .55s ease-in;
\n -ms-transition: all .55s ease-in;
\n -o-transition: all .55s ease-in;
\n transition: all .55s ease-in;
\n}<\/p>\n
.animateBlock.left {
\n left: -20%;
\n}<\/p>\n
.animateBlock.right {
\n right: -20%;
\n}<\/p>\n
.left.animated {
\n left: 0%;
\n opacity: 1;
\n filter: alpha(opacity=100);
\n}<\/p>\n
.right.animated {
\n right: 0%;
\n opacity: 1;
\n filter: alpha(opacity=100);
\n}<\/p>\n
#Txt {
\n width: 300px;
\n padding-left: 15px;
\n padding-top: 12px;
\n text-align: center;
\n}<\/p>\n
.clearfix:after {
\n content: ".";
\n display: block;
\n clear: both;
\n visibility: hidden;
\n line-height: 0;
\n height: 0;
\n}<\/p>\n
.clearfix {
\n display: inline-block;
\n}<\/p>\n
html[xmlns] .clearfix {
\n display: block;
\n}<\/p>\n
* html .clearfix {
\n height: 1%;
\n}<\/p>\n
[\/css]<\/p>\n
The .leftAlign<\/strong> and .rightAlign<\/strong> classes represent floated elements to the left and right, respectively. .animateBlock<\/strong> elements are hidden by default using zero opacity and we have added transition property on it for animation.<\/p>\n Now the final step is to bind the scroll event and exchanging classes with the help of JQuery. Once an element is inside our viewport, we will replace the class .notAnimated<\/strong> with .animated<\/strong><\/p>\n [javascript] function animateMe(elem) { [\/javascript]<\/p>\n
\n$(function() {
\n var $elements = $(‘.animateBlock.notAnimated’); \/\/contains elements of nonAnimated class
\n var $window = $(window);
\n $window.on(‘scroll’, function(e) {
\n $elements.each(function(i, elem) { \/\/loop through each element
\n if ($(this).hasClass(‘animated’)) \/\/ check if already animated
\n return;
\n animateMe($(this));
\n });
\n });
\n});<\/p>\n
\n var winTop = $(window).scrollTop(); \/\/ calculate distance from top of window
\n var winBottom = winTop + $(window).height();
\n var elemTop = $(elem).offset().top; \/\/ element distance from top of page
\n var elemBottom = elemTop + $(elem).height();
\n if ((elemBottom <= winBottom) && (elemTop >= winTop)) {
\n \/\/ exchange classes if element visible
\n $(elem).removeClass(‘notAnimated’).addClass(‘animated’);
\n }
\n}<\/p>\n