How to Animate Content Areas When They Appear on Screen Using jquery.inview.js

On a website, having content dynamically appear as visitors scroll through the page is an effective way to grab their attention.
For example, images and text can gently fade in or slide in, creating a strong visual impact. You can easily implement such functionality with “jquery.inview.js” and “animate.css”.
In this article, we’ll explain in detail for beginners how to use jquery.inview.js to animate a content area the moment it appears on screen. We’ll cover everything from the basics of JavaScript to actual code examples and advanced techniques, so be sure to read to the end.

What is jquery.inview.js?

jquery.inview.js is a jQuery plugin that detects the moment an element enters the browser’s viewport (visible area). With this feature, you can execute animations or actions in response to scrolling.

It is useful in scenarios such as:

• Animating images or text the moment they appear on screen
• Dynamically loading content when reaching the bottom of the page
• Hiding elements again once they scroll out of view

This plugin is very simple, and anyone with basic jQuery knowledge can easily introduce it.

Preparation: Load the Required Files

To use jquery.inview.js, you’ll need the following libraries and files:

1. jQuery library (version 1.x or 2.x)
2. jquery.inview.min.js
3. CSS animation library “animate.css”

You can easily load these files via a CDN (Content Delivery Network).

Step 1: Writing the CSS

First, set up the page’s overall style and CSS for the animation targets.
Load the animate.min.css file, which contains various animation patterns. Here, we’ll center the elements and adjust the basic design. This CSS is for the content area gallery display area (div) that will be animated.

<style>
body {
  font-size: 16px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 18px;
  line-height: 1.6em;
  padding-top: 20px;
}
p{
  padding-bottom: 600px;
  font-size: 18px;
}
div {
  text-align:center;
  width:400px;
   padding:50px 0;
  margin:100px auto;
}
</style>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>

Step 2: Writing the HTML

Next, create the HTML for the animation targets. This time, we will display three images and apply different animations to each.
Prepare images (1.jpg–3.jpg) in the content areas to be animated (class=”box1 animated”, class=”box2 animated”, class=”box3 animated”).

<h1>Animate the content area when it appears on screen using jquery.inview.js.</h1>
<p>Scroll down 600px.</p>

<div class="box1 animated"><img src="1.jpg" width="100%"></div>
<div class="box2 animated"><img src="2.jpg" width="100%"></div>
<div class="box3 animated"><img src="3.jpg" width="100%"></div>

Step 3: Writing the JavaScript

Using JavaScript, apply animations to each element the moment it appears in the viewport.
Load jquery.min.js (version 1.x) and jquery.inview.min.js. By writing $(‘content area to be animated’).on(‘inview’, function (event, param) { animation process }), the animation process will be executed on the “content area to be animated”.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script src='jquery.inview.min.js'></script>
<script>
$(function () {
  $('.box1').on('inview', function (event, param) {
    if (param) {
      $(this).addClass('fadeInDown');
    } else {
      $(this).removeClass('fadeInDown');
      $(this).css('opacity', 0);
    }
  });

  $('.box2').on('inview', function (event, param) {
    if (param) {
      $(this).addClass('bounceIn');
    } else {
      $(this).removeClass('bounceIn');
    }
  });

  $('.box3').on('inview', function (event, param) {
    if (param) {
      $(this).addClass('lightSpeedIn');
    } else {
      $(this).removeClass('lightSpeedIn');
    }
  });

});
</script>

In the above code, when each element enters the visible area, a CSS class (an animation class from animate.css) is added, and when it leaves, the class is removed.

Demo Page: Animate Content Area When Displayed Using jquery.inview.js

Once the code is complete, check it in the browser. As you scroll down, each piece of content should appear with a different animation.

Demo Page: Animate Content Area When Displayed Using jquery.inview.js

Source: jquery.inview

jquery.inview

Advanced Example: Adding Animations

animate.css offers many animations. For example, you can change the movement by using the following classes:

• fadeIn: Fade in
• slideInLeft: Slide in from the left
• zoomIn: Zoom in
• rotateIn: Rotate in

You can freely customize the motion by simply changing the CSS class.

Summary

In this article, we explained how to animate a content area on scroll using jquery.inview.js and animate.css.
It’s easy to implement and can add dynamic elements to your website’s design.

　
*If you reuse this, please do so at your own risk.
Do not reuse the Google Analytics tag in the head of the demo page.