Awesome jQuery Animated WebSite

In this tutorial, I’m gonna show you how to make an awesome jQuery animated website.



 
Demo
The jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function() {
    $(".nav_bar li").click(function() {
    /*Get the class from the menu button that was clicked*/
    var Tab = $(this).attr("class");
        /*Slide the current DIV to the right 1500px*/
        $(".box").stop().animate({
            left : "1500px"
        }, 1000, function() {
                    /*Now set the current DIV opacity to 0 and left 1500px then hide it*/
            $(".box").css("left", "-1500px").hide();
                    /*Show the new div slide right to 0px, set opacity to 100% then stop the animation*/
                $("#" + Tab).show().animate({
                left : "0px",
                opacity : 1.0
            }, 1000).stop();
       });
    });
});

Now for the HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div class="outer">
    <!--Here is the nav bar -->
    <div class="nav_bar">
        <!--Inside our nav bar we have a list to display all of our pages -->
        <ul>
        <li class="p1">
        Home
        </li>
        <li class="p2">
        Page 1
        </li>
        <li class="p3">
        Page 2
        </li>
        <li class="p4">
        Page 3
        </li>
    </ul>
    </div>
    <!-- Now for the page content -->
    <div class="container">
        <!-- We have a div for every page -->
        <div class="box"></div>
    <div class="box" id="p1">
        <h3>Home</h3>
    </div>
    <div class="box" id="p2">
        <h3>Page 1</h3>
    </div>
    <div class="box" id="p3">
        <h3>Page 2</h3>
    </div>
    <div class="box" id="p4">
        <h3>Page 3</h3>
    </div>
    </div>
</div>

Now put the whole thing together!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!-- Created by Barrett at RRPowered.com -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/
        ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="styles.css" />
        <title>Awesome Animated Website</title>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".nav_bar li").click(function() {

                    /*Get the class from the menu button that was clicked*/
                    var Tab = $(this).attr("class");

                    /*Slide the current DIV to the right 1500px*/
                    $(".box").stop().animate({
                        left : "1500px"
                    }, 1000, function() {

                        /*Now set the current DIV opacity to 0 and left 1500px then hide it*/
                        $(".box").css("left", "-1500px").hide();

                        /*Show the new div slide right to 0px, set opacity to 100% then stop the animation*/
                        $("#" + Tab).show().animate({
                            left : "0px",
                            opacity : 1.0
                        }, 1000).stop();
                    });
                });
            });
        </script>
    </head>
    <body>
        <div class="outer">
            <div class="nav_bar">
                <ul>
                    <li class="p1">
                        Home
                    </li>
                    <li class="p2">
                        Page 1
                    </li>
                    <li class="p3">
                        Page 2
                    </li>
                    <li class="p4">
                        Page 3
                    </li>
                </ul>
            </div>
            <div class="container">
                <div class="box"></div>
                <div class="box" id="p1">
                    <h3>Home</h3>
                </div>
                <div class="box" id="p2">
                    <h3>Page 1</h3>
                </div>
                <div class="box" id="p3">
                    <h3>Page 2</h3>
                </div>
                <div class="box" id="p4">
                    <h3>Page 3</h3>
                </div>
            </div>
        </div>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/*Created by Barrett at RRPowered.com*/
.outer {
   padding 0;
   margin: 0;
   }   
 
.nav_bar {
   width: 850px;
   margin-top: 60px;
   margin-left: auto;
   margin-right: auto;
   background-color: #f5f5f5;
   border: solid #bfbfbf 2px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   overflow: hidden;
   }
 
.nav_bar ul {
   padding: 0;
   margin: 0;
   list-style: none;
   }
 
.nav_bar li {
   padding: 6px 8px 6px 8px;
   border-right: solid #bfbfbf 2px;
   cursor: pointer;
   font-weight: bold;
   display: inline;
   float:left;
   }   
 
.nav_bar li:hover {
   background-color: #e2e2e2;
   } 
 
.box {
   padding: 10px;
   background-color: #f5f5f5;
   border: solid #bfbfbf 2px;
   -moz-border-radius: 8px;
   border-radius: 8px;   
   }   
 
.box {
   display: none;
   position: relative;
   } 
 
.container {
   width: 850px;
   margin-top: 30px;
   margin-left: auto;
   margin-right: auto;   
   overflow:hidden;
   } 
 
 #p1 {
   display: block;
   }


ADVERTISEMENT

Tags: , ,

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends!

Discussion

  • http://www.mariagerobes.fr/ Robe de mariée

    it’s a very good Article,thank you very much!