Parallax and animations are gaining attention as web page effects. In this article, we’ll introduce an easy way to implement these effects using jquery.superscrollorama.js.
This article explains how to display content with visual effects as the page scrolls. jquery.superscrollorama.js is a JavaScript library for manipulating elements on a page in response to scrolling.
CSS Code
First, let’s prepare the CSS styles needed to implement the visual effects. The CSS shown below should be applied after loading the normalize.css file. It includes styles for the parallax and various effect display areas (.demo #wrapper, #fly, #scale).
<link rel="stylesheet" href="normalize.css" type="text/css">
<style>
* {
padding: 0;
margin: 0;
}
body {
font-weight: bold;
font-size: 20px;
text-align: center;
visibility: hidden;
}
.demo{
visibility: visible;
}
.demo #wrapper{
height: 1600px;
padding-top: 400px;
margin-bottom: 100px;
width: 100%;
}
h1{
text-align: center;
font-size: 20px;
padding: 20px 0 40px 0;
line-height: 1.8em;
}
h2 {
font-size: 140px;
margin: 0;
color: #4DFFA6;
padding: 60px;
text-shadow: 0 4px 2px #000;
width: 90%;
}
#fly { position: relative; }
#scale { width: 500%; margin: 0px -200%; padding: 0; }
</style>
HTML Code
Next, let’s write the HTML structure. Specify elements with specific ID attributes as the targets of the scroll effects. Add class=”demo” to the body tag and prepare the effect display areas with IDs like “wrapper”, “fade”, “fly”, “spin”, and “scale”.
<body class="demo">
<h1>Display parallax and various effects on the page using jquery.superscrollorama.js.<br>Try scrolling down.</h1>
<div id="wrapper">
<h2 id="fade">Fade In</h2>
<h2 id="fly">Appear from Left</h2>
<h2 id="spin">Spin</h2>
<h2 id="scale">Scale Up</h2>
</div>
</body>
JavaScript Code
Now let’s implement the scroll effects using Superscrollorama. Load the required JavaScript libraries: TweenMax.min.js, jquery-1.9.1.min.js, and jquery.superscrollorama.js. Use $.superscrollorama().addTween('element ID', TweenMax.from($('#element ID'), options), scroll duration); Refer to the SUPERSCROLLORAMA documentation for available options.
<script type="text/javascript" src="TweenMax.min.js"></script>
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.superscrollorama.js"></script>
<script>
$(document).ready(function() {
var scrollDuration = 200;
$.superscrollorama().addTween('#fade', TweenMax.from( $('#fade'), .5, {css:{opacity: 0}}), scrollDuration);
$.superscrollorama().addTween('#fly', TweenMax.from( $('#fly'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut}), scrollDuration);
$.superscrollorama().addTween('#spin', TweenMax.from( $('#spin'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut}), scrollDuration);
$.superscrollorama().addTween('#scale', TweenMax.fromTo( $('#scale'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'240px'}, ease:Quad.easeInOut}), scrollDuration);
});
</script>
Demo Page: Parallax and Effects with jquery.superscrollorama.js
If you want to see how the effects work, a demo page is available. Check it out from the link below:
Demo page displaying parallax and various effects using jquery.superscrollorama.js
Source: SUPERSCROLLORAMA
You can find detailed documentation and sample code for Superscrollorama on the official page below:
Conclusion
By using jquery.superscrollorama.js, you can easily implement parallax and animation effects with simple script code. It’s a great tool for creating interactive effects that respond to page scrolling.
* Please use it at your own risk when reusing the code. Do not reuse the Google Analytics tag from the demo page’s head tag.
