Ads

July 30, 2014

How to Implement an Animation Effect Website with jQuery

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.
How to Implement an Animation Effect Website with jQuery

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

Most Popular Posts