Skip to content

Commit

Permalink
Initial Release v1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
rampatra committed Jul 23, 2013
0 parents commit 16ff7d7
Show file tree
Hide file tree
Showing 6 changed files with 560 additions and 0 deletions.
83 changes: 83 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
AnimateScroll.js
================

A Simple jQuery Plugin for Animating the Scroll

Demo can be seen at http://plugins.compzets.com/animatescroll


What is it exactly?
-------------------

AnimateScroll.js is a jQuery plugin which enables you to scroll to any part of the page in style by just calling the animatescroll() function with the Id or Classname of the element where you want to scroll to.

It gives power to the user with its various options to customize the style of scrolling, scroll speed and many more. Supports more than 30 unique Scrolling Styles.


Options
-------

AnimateScroll.js has 3 options:

easing
scrollSpeed
padding

easing : This option defines the scrolling style. The various easing effects supported can be seen at www.easings.net (Accepts string only)

scrollSpeed : Controls the scrolling speed, higher is the number slower is the scroll speed (Accepts only number)

padding : Adjusts little ups and downs in scrolling. Suppose a small amount of padding is applied to a particular element due to which the scroll didn't end at the right position, so this option helps you to rectify (Accepts numbers only, can be negative)


Easing Effects
--------------

This plugin supports more than 30 different styles of scrolling. The easing option lets you choose a particular style of scrolling according to your choice.

Some of them are:

$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInOutBack'});

$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeOutBounce'});

$('#section-2').animatescroll({scrollSpeed:3000,easing:'easeOutElastic'});



Usage
-----

You need two things for this plugin to work, one is "jQuery library" and the other "animatescroll.js" file

Just include the "animatescroll.js" file after the "jQuery library" as shown in the code snippet below and you're done
NOTE: The only dependency for this plugin to work is jQuery library


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



NOTE: There are two js files, if you do not want the various easing effects, you can use the animatescroll.noeasing.js



About Me
--------

My name is Ram Swaroop. I am a Programmer as well as a Designer. I am the Founder of Compzets.com, as well as various other online applications.

This is my first jQuery Plugin and I hope you all like it. You are free to make more improvements to the code and can do the same @github.

If my plugin helped you or unlikely for any issues tweet me @ramswaroopatra, will be happy to hear from you.
162 changes: 162 additions & 0 deletions animatescroll.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
/*
* @build : 20-07-2013
* @author : Ram swaroop
* @easing effect : easings.net
*/
(function($){

$.fn.animatescroll = function(options) {

// fetches options
var opts = $.extend({},$.fn.animatescroll.defaults,options);

// Get the distance of particular id or class from top
var offset = this.offset().top;

// defines various easing effects
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
def: 'easeOutQuad',
swing: function (x, t, b, c, d) {
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOutBounce: function (x, t, b, c, d) {
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});

// Scroll the page to the desired position
$("html, body").animate({ scrollTop: offset-opts.padding }, opts.scrollSpeed, opts.easing);

};

// default options
$.fn.animatescroll.defaults = {
easing:"swing",
scrollSpeed:800,
padding:0
};

}(jQuery));
28 changes: 28 additions & 0 deletions animatescroll.noeasing.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/*
* @build : 20-07-2013
* @author : Ram swaroop
* @easing effect : easings.net
*/
(function($){

$.fn.animatescroll = function(options) {

// fetches options
var opts = $.extend({},$.fn.animatescroll.defaults,options);

// Get the distance of particular id or class from top
var offset = this.offset().top;

// Scroll the page to the desired position
$("html, body").animate({ scrollTop: offset-opts.padding }, opts.scrollSpeed, opts.easing);

};

// default options
$.fn.animatescroll.defaults = {
easing:"swing",
scrollSpeed:800,
padding:0
};

}(jQuery));
112 changes: 112 additions & 0 deletions custom.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
/*
Document : style
Created on : 20 Jul, 2013, 3:58:03 PM
Author : RAM
*/
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 15px; padding: 0; margin: 0;}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #89867e;
background: #f9f9f9;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #fff;
}
.main,
.container > header {
width: 100%;
margin: 0 auto;
padding: 2em;
}
.main {
max-width: 82.667em;
min-height: 40em;
}
.container > header {
text-align: center;
font-size: 16px;
padding: 4em 2em 3em;
background: rgba(0,0,0,0.01);
}
.container > header h1 {
font-size: 2.625em;
line-height: 1.3;
margin: 0;
font-weight: 700;
}
.container > header span {
display: block;
font-size: 60%;
color: #ceccc6;
padding: 0 0 0.6em 0.1em;
font-weight:300;
}
@media screen and (max-width: 25em) {
.codrops-icon span {
display: none;
}
.container > header {
font-size: 75%;
}
}
[id^="section-"]{margin-top:-20px;padding:25px;padding-top:5px}
[id^="section-"] h1,[id^="section-"] h3{font-family: 'Lato', Calibri, Arial, sans-serif;font-weight:300;color:#fff}
[id^="section-"] .content-wrapper{color:#f2f2f2;font-size:20px;font-weight:100}
[id^="section-"] .content-wrapper>pre{font-size:14px;display:inline-block}
[id^="section-"] .content-wrapper a{color:#f2f2f2;border-bottom: 1px dotted white}
[id^="section-"] .content-wrapper li{list-style:square}
#section-1{background:rgb(208, 101, 3)}
#section-2{background:rgb(233, 147, 26)}
#section-3{background:rgb(22, 145, 190)}
#section-4{background:rgb(22, 107, 162)}
#section-5{background:rgb(27, 54, 71)}
#section-6{background:rgb(21, 40, 54);margin-bottom:-30px}
.btn{padding:10px;border:3px solid #fff;background-color:transparent;color:#fff;font-weight:700;text-transform:uppercase;display:inline-block}
.btn:hover{border-style:dashed;cursor:pointer}
.btn:active{margin-top:5px;margin-bottom:-5px}
.demo-btn{position:absolute;margin-top:12px;margin-left:40px}
.demo-btn:active{margin-top:17px;margin-bottom:-17px}
.easing-buttons{margin-top:100px}
.download-buttons{margin-top:350px}
.fl{float:left}
.fr{float:right}
.disp-inl{display:inline}
.disp-inl-blk{display:inline-block}
.w30{width:30%}
.w50{width:50%}
.w60{width:60%}
.w70{width:70%}
/* For Responsiveness */
@media (min-width:32.5em) and (max-width: 61.250em) {
[id^="section-"] .content-wrapper{font-size:1.2em}
[id^="section-"] .content-wrapper>pre{display:block}
.demo-btn{position:relative}
.easing-buttons,.download-buttons{margin-top:0}
.fr{float:none}
.w30,.w60,.w70{width:100%}
}
@media (min-width: 32.5em) and (max-width: 38.688em) {
[id^="section-"] .content-wrapper{font-size:1.1em}
[id^="section-"] .content-wrapper>pre{display:block}
.demo-btn{position:relative}
.easing-buttons,.download-buttons{margin-top:0}
.fr{float:none}
.w30,.w60,.w70{width:100%}
}
@media (max-width: 32.438em) {
[id^="section-"] .content-wrapper{font-size:1em}
[id^="section-"] .content-wrapper>pre{display:block}
.demo-btn{position:relative}
.easing-buttons,.download-buttons{margin-top:0}
.fr{float:none}
.w30,.w60,.w70{width:100%}
}
Loading

0 comments on commit 16ff7d7

Please sign in to comment.