RSS

AnimateScroll – Cool Animations Over jQuery Scroll

21 Sep

In single page websites, we might have seen scroll to section animation. Also in long web pages, we have seen go to top scroll animations. AnimateScroll takes scroll animation to a new level. It has over 30+ animation types.

AnimateScroll

AnimateScroll

Demo

Download

The plugin supports customizing the effects and scroll speed.

AnimateScroll Usage

Using the plugin is very simple. Include jQuery reference. If you want to scroll to an element, just call the plugin function.

 

 
1
2
3
4
5
6
7
8
9
10
11
12
<html>
    <head>
        <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
        <script src=”animatescroll.js”>
    </head>
    <body>
        <div id=”section-1″>This is the element where you want to scroll to<div>
        
        // You may call the function like this
        <a onclick=”$(‘[id-or-class-of-element]’).animatescroll();”>Go to Element</a>
    </body>
</html>

 

To adjust scrolling speed and effect, you can do something like this:

 
1
$(‘#section-2′).animatescroll({scrollSpeed:2000,easing:’easeInOutBack’});

 

More details and working can be found in the demo page.

Advertisements
 
Leave a comment

Posted by on September 21, 2013 in Jquery

 

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: