Web design is more than just presenting information. Today, we’ll show you how to create dynamic parallax effects using skrollr.js that captivate your visitors. Especially, this effect—where a circle moves along an arc in response to scrolling—adds a unique touch to your website.
Basics of Circle Movement with CSS
First, set up the basic CSS to make the circle move when scrolling. Load the fixed-positioning.css file.
Here we define the style for a circle with the ID #thing. You can customize the size, color, and border-radius to match your site’s design.
<link href="fixed-positioning.css" rel="stylesheet" type="text/css" />
<style type="text/css">
h1{
text-align: center;
font-size: 18px;
padding: 20px 0;
}
#thing {
width:80px;
height:80px;
border-radius:40px;
background:#00A3D9;
}
</style>
HTML Structure and Keyframe Settings
Next, let’s check the HTML structure. What’s important here is setting keyframes from data-0 to data-10000. This controls how the circle moves in response to scrolling.
<h1>Scroll down to see the blue circle move along an arc. Once it reaches the bottom, it will return to the top of the page.</h1>
<div id="thing" data-0="left[cos]:10%;top[sin]:10%;" data-10000="left:90%;top:90%;"></div>
Animating the Circle with skrollr.js
In this step, we use skrollr.js to animate the circle along an arc using JavaScript. Load the skrollr.js file.
Write skrollr.init({options}). Use sin and cos functions to create smooth movements for the element with id=”thing”. Also, set the page to return to the top after scrolling to the bottom.
<script type="text/javascript" src="skrollr.js"></script>
<script type="text/javascript">
skrollr.init({
easing: {
sin: function(p) {
return (Math.sin(p * Math.PI * 2 - Math.PI/2) + 1) / 2;
},
cos: function(p) {
return (Math.cos(p * Math.PI * 2 - Math.PI/2) + 1) / 2;
},
},
render: function(data) {
//Loop
if(data.curTop === data.maxTop) {
this.setScrollTop(0, true);
}
}
});
</script>
Parallax Demo Page: Circle Moves Along Arc Using skrollr.js
If you’d like to see a live demo, click the link below. This is a great opportunity to see how the effect works and think about how to apply it to your own site.
Parallax demo with circle arc animation using skrollr.js
skrollr Source and Documentation
For more in-depth information about skrollr.js, check the official documentation below. It offers detailed explanations and various use cases.
skrollr – parallax scrolling for the masses
Conclusion
In this article, we introduced the basic implementation of parallax effects using skrollr.js. Take advantage of this technique to create visually appealing websites.
* Use at your own risk when reusing this content.
Please do not reuse the Google Analytics tag found in the demo page’s head tag.
