The jquery.scrollfx plug-in
The jquery.scrollfx can be used for creating animations or some cool effects in elements as the visitors of your website scroll down the page.
You just need to add a few dependency files like plug-in JS and CSS files, specify the elements where you want to create effects or animations, and set a few options in jQuery code, that’s it!
Still unclear? Have a look at the demo and how to use this plug-in in your web pages in the following section.
A demo of jQuery animation by scrolling down
In this example, the page header and a few sections on the page are created with Bootstrap classes. The content contains text and background images. Scroll down the page and notice the change in opacity of the background. Also, see how the text scales down.
Online demo and code
For setting up this plug-in in your web pages, simply download and extract the jquery.scrollfx.js file from here.
<script src=”js/jquery.scrollfx/jquery.scrollfx.js”></script>
Make sure to include this file after the reference of jQuery.
In the <head> section, place the jQuery code with a few options of plug-in:
$(document).ready(function(){
$('section, header').scrollFx({
precision: 15,
scaleElements: '.row',
opacityElements: '.image'
});
});
The above script specified that the animation should occur in the section and header elements. The precision, scaleElements, and opacityElements options values are also set there.
Also note, the images are set in the demo.css files that are used as the background in the demo. If you intend to use the same CSS, which is unlikely, then take care of the path accordingly.
Complete code with markup:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery.scrollfx/demo.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function(){
$('section, header').scrollFx({
precision: 15,
scaleElements: '.row',
opacityElements: '.image'
});
});
</script>
</head>
<body>
<header id="top">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>jquery<span class="hidden-sm hidden-xs">.</span><br><span class="text-success">scrollfx</span></h1>
<p class="lead">A demo of effects as scroll down</p>
<br>
<div class="buttons">
<a href="https://github.com/marksten/jquery.scrollfx" class="btn btn-lg btn-success">
<i class="fa fa-github"></i>
Download from github
</a>
</div>
</div>
</div>
</div>
</header>
<section id="first" class="container-fluid">
<div class="image"></div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-6">
<h2>The first part</h2>
<hr>
<p class="lead">
Note the text scaling down change in background opacity as you scroll down
</p>
<a href="#top" class="btn btn-lg btn-primary" data-to-top>
Scroll to top
<i class="fa fa-chevron-top"></i>
</a>
</div>
</div>
</div>
</section>
<section id="second" class="container-fluid">
<div class="image"></div>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Section 2</h2>
<hr>
<p class="lead">
Place some content here that you want to scale down
</p>
<a href="#top" class="btn btn-lg btn-primary" data-to-top>Scroll to top</a>
</div>
</div>
</div>
</section>
<section id="third" class="container-fluid">
<div class="image"></div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-6">
<h2>Section 3</h2>
<hr>
<p class="lead">
Also tested on smaller device
</p>
<a href="#top" class="btn btn-lg btn-primary" data-to-top>Scroll to top</a>
</div>
</div>
</div>
</section>
<section id="fourth" class="container-fluid">
<div class="image"></div>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Section 4</h2>
<hr>
<p class="lead">
Just set a few options and see the magic
</p>
<a href="#top" class="btn btn-lg btn-primary" data-to-top>Scroll to top</a>
</div>
</div>
</div>
</section>
<footer>
</footer>
<script src="js/jquery.scrollfx/jquery.scrollfx.js"></script>
<script src="js/jquery.scrollfx/demo.js"></script>
</body>
</html>