Slide In animation while scrolling page

24 / Feb / 2016 by Vijay Ranghar 0 comments

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.

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.

To start off, let’s create a html layout of the page.

<div id="wrapper">
  <img src="http://placehold.it/750x300" />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Sed faucibus, augue ac maximus auctor, dui elit ornare libero, 
at maximus sem mauris lacinia eros. Pellentesque turpis dolor,
 aliquet eu eros vitae, congue volutpat orci. Nullam vel vulputate
    odio. Sed vestibulum felis vel convallis consequat.
 Cras a lacinia ante.
  </p>
  <div class="notAnimated animateBlock leftAlign left">
    <img src="http://placehold.it/382x152" alt="apple devices">
  </div>
  <div id="Txt" class="notAnimated animateBlock rightAlign right">
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
 faucibus, augue ac maximus auctor, dui elit ornare libero, at maximus
 sem mauris lacinia eros. Pellentesque turpis dolor, aliquet eu eros 
vitae, congue volutpat orci. Nullam vel vulputate
      odio. Sed vestibulum felis vel convallis consequat. Cras a lacinia
 ante.
    </p>
  </div>
  <div class="notAnimated animateBlock right">
    <img src="http://placehold.it/750x400" alt="white iphone flat ui">
  </div>
</div>
<!-- wrapper -->
<script src="https://code.jquery.com/jquery-1.12.0.js"></script>

Now that the HTML is in place, we can use CSS to arrange, animate and decorate each element.

* {
  margin: 0;
  padding: 0;
}

html {
  overflow-y: scroll;
}

body {
  background: #f0f0f0;
  color: #000;
}

img {
  border: 0;
  max-width: 100%;
}

#wrapper {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

.rightAlign {
  float: right;
}

.leftAlign {
  float: left;
}

.animateBlock {
  margin-top: 20px;
  display: inline-block;
  opacity: 0;
  filter: alpha(opacity=0);
  position: relative;
  -webkit-transition: all .55s ease-in;
  -moz-transition: all .55s ease-in;
  -ms-transition: all .55s ease-in;
  -o-transition: all .55s ease-in;
  transition: all .55s ease-in;
}

.animateBlock.left {
  left: -20%;
}

.animateBlock.right {
  right: -20%;
}

.left.animated {
  left: 0%;
  opacity: 1;
  filter: alpha(opacity=100);
}

.right.animated {
  right: 0%;
  opacity: 1;
  filter: alpha(opacity=100);
}

#Txt {
  width: 300px;
  padding-left: 15px;
  padding-top: 12px;
  text-align: center;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

  

The .leftAlign and .rightAlign classes represent floated elements to the left and right, respectively. .animateBlock elements are hidden by default using zero opacity and we have added transition property on it for animation.

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 with .animated

$(function() {
  var $elements = $('.animateBlock.notAnimated'); //contains elements of nonAnimated class
  var $window = $(window);
  $window.on('scroll', function(e) {
    $elements.each(function(i, elem) { //loop through each element
      if ($(this).hasClass('animated')) // check if already animated
        return;
      animateMe($(this));
    });
  });
});

function animateMe(elem) {
  var winTop = $(window).scrollTop(); // calculate distance from top of window
  var winBottom = winTop + $(window).height();
  var elemTop = $(elem).offset().top; // element distance from top of page
  var elemBottom = elemTop + $(elem).height();
  if ((elemBottom <= winBottom) && (elemTop >= winTop)) {
    // exchange classes if element visible
    $(elem).removeClass('notAnimated').addClass('animated');
  }
}

Fiddle link

Happy coding :)

Tag -

FOUND THIS USEFUL? SHARE IT

Leave a comment -