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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

$(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
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
71
72
73

<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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

<!-- 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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

/*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;
   }
Posted on March 25, 2012 Views: 2794
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!