How to Implement an Animation Effect Website with jQuery

In this post I want to explain how to implement an Animation Website with jQuery. It's simple just using some lines of java-script code. Implement this and enrich animation features to your web projects. Take a look at the live demo here.

Download Script     Live Preview

Javascript Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.link").LinkAnimate()

});

jQuery.fn.LinkAnimate = function(settings) {

settings = jQuery.extend({
speed : 1000
}, settings);

return this.each(function(){
var boxcall =$(this);
$(boxcall).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(boxcall).attr("href")

var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
window.location.hash = elementClick

});

return false;

})

})

}

</script>

HTML Code
Contains HTML code. class='link' calling LinkAnimate() function.

<div id='main'>

<div id='menu'>

<a href="#about" class="link"> About</a>

<a href="#profile" class="link">Profile</a>

<a href="#contact" class="link">Contact</a>

</div>

<div id='box'>

<a id="about" ></a>

<h1>About</h1>

</div>

<div id='box'>

<a id="profile"></a>

<h1>Profile</h1>

</div>

<div id='box'>

<a id="contact"></a>

<h1>Contact</h1>

</div>

</div>

CSS Code

body

{
font-family:Arial, Helvetica, sans-serif;
}

a

{
font-weight:bold;
color:#000;
text-decoration:none;
margin-right:50px;
}

a:hover

{
font-weight:bold;
color:#000;
text-decoration:none
}

#main

{
margin-left:70px;
margin-right:70px;
margin-top:70px
}

#menu

{
margin-top:30px;
position:fixed;
margin-left:450px;
font-size:18px;
}

#box

{
height:700px;
}