How to Animate with Mouse Scroll using ScrollTween.js

In this article, we will introduce how to use ScrollTween.js to display animations based on the mouse wheel scroll amount within a specific area. By reading this article, even beginners will be able to easily implement scroll animations.

Mechanism of Scroll Animation

ScrollTween.js is a library that applies animations to specific elements based on the mouse wheel scroll action. By using this, you can move elements or change their size according to the scroll movement.

CSS Example for Animating with Mouse Scroll

Below is an example of CSS for elements to be animated (#anime1, #anime2) and the mouse scroll area (#container). Please modify as necessary.

<style>
body{
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	padding: 0;
	margin: 0;
}
h1{
	font-size:18px;
	line-height:1.6em;
	text-align:center;
	font-weight:normal;
	padding:10px 0;
}
.clWrap{
	width:700px;
	margin:0 auto;
	text-align:left;
}
#container{
	width:700px;
	height:500px;
	padding:0;
	margin:0 auto;
	border:solid 1px #CCCCCC;
}
#container *{
	padding:0;
	margin:0;
}
#anime1{
	width:180px;
	height:70px;
	border:solid 3px #000000;
	text-align:center;
	line-height:70px;
}
#anime2{
	width:200px;
	height:70px;
	background-color:#000;
	color:#FFF;
	text-align:center;
	line-height:70px;
}
</style>

JavaScript for Animating with Mouse Scroll using ScrollTween.js

Next, let’s look at the JavaScript code for implementing animations using ScrollTween.js. This code utilizes jQuery and ScrollTween.js.
Load the files jquery-1.8.1.min.js, jquery.mousewheel.js, and ScrollTween.js. Set ScrollTween.container (mouse scroll area) and add (animation options) to ScrollTween.container (mouse scroll area).

<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="ScrollTween.js"></script>
<script type="text/javascript">
$(function() {
	var containerDiv = $('#container');
	var container = ScrollTween.container(containerDiv);
	container.add("#anime1", function(tween) {
		tween
		.to(0, tween.styles().topOut().center())
		.range(100, 200, tween.styles().middle())
		.to(400, tween.styles().rightOut());
    
	});
	container.add("#anime2", function(tween) {
		tween
		.to(200, tween.styles().bottomOut().center())
		.range(300, 400, tween.styles().middle())
		.to(500, tween.styles().leftOut());
	});
	container.play();
});
</script>

HTML for Animating with Mouse Scroll

Below is the HTML code for applying scroll animations. Place the elements to be animated (id=”anime1″, id=”anime2″) within the mouse scroll area (id=”container”).

<div class="clWrap">
    <h1>Please scroll with the mouse wheel within the frame below.<br />The specified frame will move according to the scroll amount.</h1>

        <div id="container">
            <div id="anime1">Moves up → down → right</div>
            <div id="anime2">Moves down → up → left</div>
        </div>

</div><!--/clWrap-->

Demo Page for Animating with Mouse Scroll using ScrollTween.js

Using the above code, let’s see how the animation works with the mouse wheel scroll. Visit the demo page via the following link and experience the actual movement.
Demo page for animating with mouse scroll using ScrollTween.js

Reference Site: jQuery Plugin “ScrollTween.js” for Parallax-like or Scroll Animations

For more detailed information and other samples, check the following reference site.
Reference site: jQuery Plugin “ScrollTween.js” for Parallax-like or Scroll Animations

Summary

In this article, we explained how to animate elements based on the mouse wheel scroll using ScrollTween.js. Scroll animations are a powerful tool for adding dynamic visual effects to your website. Please incorporate it into your projects.
We hope this article will be helpful to you. Enjoy your web development!

　
*Use at your own risk.
Please do not reuse the Google Analytics tag within the demo page tags.