Animation Content

User Rating: / 0
PoorBest 

Hi, in this tutorial i will present you web site animation model. Is made with css, html and jQuery. You can change the size the buttons etc.

Create a new html page and set the name, index.html, thas is our home page, then in the head section copy the code:

<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
@import url(css.css);
</style>
<script type="text/javascript" src="js.js"></script>

In the body tag create the container four our web site and the buttons with links:

    <div id="wrapper">
    <h1>ajax ... nettuts</h1>
    <ul id="nav">
        <li><a href="index.html">welcome</a></li>
        <li><a href="about.html">about</a></li>
        <li><a href="portfolio.html">portfolio</a></li>
        <li><a href="contact.html">contact</a></li>
        <li><a href="terms.html">terms</a></li>
    </ul>
    <div id="content">       
        <h2>Welcome!</h2>
        <p>Hi, welcome to the demonstration for the NETTUTS tutorial - "How to Load In and Animate Content with jQuery"</p>
        <p>In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. We will also be integrating some awesome effects...</p>
    </div>
 </div>

Now go to file -> salve as -> and set the name for the new page, you can put any name, but be careful, set the html extension in the tail and go to the li tag and change the name with your page. Multiply the proces for every page you want to create.

Now, create a css file with css.css name and copy the styles:

@charset "utf-8";
/* CSS Document */

body {
    font: 0.8em "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
    color: #343434;
    background: #121212;
    margin: 0;
    padding: 0;
}
#wrapper {
    width: 710px;
    margin: 30px auto;
    background: #0d0d0d url(images/header.jpg) no-repeat;
    padding: 55px 25px 25px 25px;
    border: 12px solid #2e2e2e;
    position:relative;
}
h1 {
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    padding: 0.3em 0;
    text-indent:-99999px;
}
#nav {
    list-style: none;
    padding: 0;
    margin: 10px 0 20px 0;
    background: #2e2e2e url(images/nav_bar.jpg) repeat-x;
    display: block;
    overflow: hidden;
    font-size: 0.9em;
    height:33px;
    text-transform:capitalize;
}
#nav li {
    display: inline;
}
#nav li a {
    display: block;
    float: left;
    padding: 10px 20px;
    color: white;
    text-decoration: none;
}
#nav li a:hover {
    background: #1b1b1b url(images/nav_bar_o.jpg) repeat-x;
}
#load {
    display: none;
    position: absolute;
    right: 10px;
    top: 10px;
    background: url(images/ajax-loader.gif);
    width: 43px;
    height: 11px;
    text-indent: -9999em;
}

#content {
}
h2 {
    margin: 0;
    padding: 0.5em 0;
    color:#568945;
    font-family:Helvetica, Arial, Sans-serif;
}
p {
    margin: 0;
    padding: 0.4em 0;
    color:#686868;
    line-height:1.4em;
}

#content img.right {
    float: right;
   margin: 0 0 8px 8px;
}

Create a javascript file and copy the script:

$(document).ready(function() {
                          
    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        }                                           
    });

    $('#nav li a').click(function(){
                                 
        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;
       
    });

})

The last step is to download the jQuery plugin, that was all, bye!

This script has been developed by http://net.tutsplus.com !