jQuery effects / animations as scroll down with Bootstrap

The jquery.scrollfx plug-in

The jquery.scrollfx can be used for creating the animations or some cool effects in elements as the visitors of your website scroll down to the page.

You just need to add a few dependency files like plug-in JS and CSS file, 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 as scrolling down

In this example, the page header and a few sections in 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 text scales down.

jQuery animations scroll

See 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:

 

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.