To capture users’ attention on a web page, animation effects triggered by scrolling are gaining popularity. Especially, displaying animations when elements come into view not only creates visual impact but also enhances user experience.
This article explains how to use emergence.js to detect when elements appear on the screen during scrolling and apply animations. We provide detailed examples with CSS, HTML, and JavaScript to help you implement it easily.
Basic Animation Setup with CSS
To apply animations, you first need to define the appearance and motion of elements in CSS. Load the demo.css file. In demo.css, we’ll demonstrate how to animate circles, triangles, and squares as they appear during scrolling.
<link rel="stylesheet" type="text/css" href="demo.css">
<style>
body {
font-size: 18px;
text-align: center;
}
h1{
text-align: center;
font-size: 22px;
line-height: 1.6em;
padding-top: 20px;
}
</style>
This CSS creates smooth animations using “opacity” and “transform” when elements appear on the screen.
Creating the HTML Structure
Next, prepare the HTML elements to which the animation will be applied. Below is an example of HTML code that displays circular, triangular, and square shapes.
<h1>Detecting Element Visibility on Scroll with emergence.js and Triggering Animations<br>Scroll down to see it in action.</h1>
<div class="container container--fluid">
<div class="column column1">
<div class="shape shape--circle" data-emergence="hidden">
<div class="shape__svg">
<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>circle</title><g fill="none" fill-rule="evenodd"><circle fill="#ffffff" cx="120" cy="120" r="104"/></g></svg>
</div>
</div>
<div class="shape shape--triangle" data-emergence="hidden">
<div class="shape__svg">
<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>triangle</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M120 16l120 208H0"/></g></svg>
</div>
</div>
<div class="shape shape--square" data-emergence="hidden">
<div class="shape__svg">
<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>square</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M20 20h200v200H20z"/></g></svg>
</div>
</div>
<div class="shape shape--circle" data-emergence="hidden">
<div class="shape__svg">
<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>circle</title><g fill="none" fill-rule="evenodd"><circle fill="#ffffff" cx="120" cy="120" r="104"/></g></svg>
</div>
</div>
<div class="shape shape--triangle" data-emergence="hidden">
<div class="shape__svg">
<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>triangle</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M120 16l120 208H0"/></g></svg>
</div>
</div>
<div class="shape shape--square" data-emergence="hidden">
<div class="shape__svg">
<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>square</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M20 20h200v200H20z"/></g></svg>
</div>
</div>
<div class="shape shape--circle" data-emergence="hidden">
<div class="shape__svg">
<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>circle</title><g fill="none" fill-rule="evenodd"><circle fill="#ffffff" cx="120" cy="120" r="104"/></g></svg>
</div>
</div>
<div class="shape shape--triangle" data-emergence="hidden">
<div class="shape__svg">
<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>triangle</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M120 16l120 208H0"/></g></svg>
</div>
</div>
</div>
</div>
This HTML uses the data-emergence attribute to set the initial state of elements.
Using emergence.js with JavaScript
Finally, write JavaScript code to use emergence.js for detecting element visibility on scroll and applying animations. Load the emergence.js and demo.js files, and initialize with emergence.init({options}).
<script src="emergence.js"></script>
<script>
emergence.init({
reset: true,
handheld: true,
elemCushion: 0.50,
offsetTop: 100,
offsetBottom: 100,
throttle: 300
});
</script>
<script src="demo.js"></script>
In this script, the emergence.on method is used to define behaviors when elements appear or disappear from the screen.
Demo Page: Detecting Element Visibility and Displaying Animation on Scroll with emergence.js
By combining the CSS, HTML, and JavaScript described above, you can create a demo page like the one below.
Demo page using jquery.qrcode.js to generate QR codes
Source: Emergence.js
You can check the official documentation of the “emergence.js” library used in this article below.
Conclusion
Scroll-triggered animations enhance interactivity on web pages and effectively draw users’ attention. By using “emergence.js”, even beginners can implement animations with ease. Try incorporating it into your own project!
*Please use at your own risk if you reuse this content.
Do not copy the Google Analytics tag from the head tag of the demo page.
