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 PreviewJavascript 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
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;
}
thank you very much for sharing all this nice how-to's.
ReplyDeletewe are learning, and blogs like this one save our lives
thank you very much ... aloooot
ReplyDeletethank you so much my dear friend..you give a lot of information for us.it is very useful and most easy way to learn.before i felt very difficult to me but you solve my problem thank you....
ReplyDeletenice
ReplyDelete