Membuat animasi gambar dengan jquery parallax
Berikut ini script untuk membuat animasi dengan jQuery Parallax simpan dengan nama index.html
Jika dijalankan tampilan nya sebagai berikut :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<!-- REQUIRED FOR PARALLAX -->
<script type="text/javascript" language="JavaScript" src="js/jquery.jparallax.min.js" ></script>
<script type="text/javascript" language="JavaScript" src="js/jquery.event.frame.js" ></script>
<link lang="text/css" href="css/styles.css" />
<script type="text/javascript">
jQuery(document).ready(function()
{
$('#parallax .parallax-layer')
.parallax({
mouseport: $('#parallax')
});
});
</script>
<title>Juniawan89.blogspot.com | Parallax Effect</title>
<style>
#content { background-color:#FFFFFF; width:950px; min-height:250px; text-align:left; padding:0px; }
h1 { padding:20px; background-color:gray; color:white; margin:0; text-shadow: #9E9B9B 2px 2px 2px; text-align:center;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E3E1E1', endColorstr='#CCCACA'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#E3E1E1), to(#CCCACA)); /* for webkit browsers */
background: -moz-linear-gradient(top, #E3E1E1, #CCCACA); /* for firefox 3.6+ */
}
.large { font-size:22px; }
.orange { color:orange; }
.italic { font-style:italic }
.textmiddle {vertical-align:middle;}
.padout { padding-left:25px; padding-right:25px; }
.rounded-corners {
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
-khtml-border-radius: 40px;
border-radius: 40px;
}
.rounded-corners-top {
-moz-border-top-radius: 40px;
-webkit-border-radius: 40px;
-khtml-border-radius: 40px;
border-radius: 40px;
}
h2 { color:blue; font-size:22px; color:white; background-color:gray; padding:10px 10px 10px 20px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
-khtml-border-radius: 40px;
border-radius: 40px;
text-shadow: #9E9B9B 2px 2px 2px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E3E1E1', endColorstr='#CCCACA'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#E3E1E1), to(#CCCACA)); /* for webkit browsers */
background: -moz-linear-gradient(top, #E3E1E1, #CCCACA); /* for firefox 3.6+ */
}
p {
margin: 20px !important;
}
.scrolldown { padding-left:20px; color:#EDECE8; font-size:40px; font-weight:bold; vertical-align:middle;
text-shadow: #6374AB 2px 2px 2px;
}
#page-wrap {
border: 1px solid orange;
margin: 10px auto;
width: 950px;
}
#parallax-header { height:200px; background-color:gray; }
#parallax {position:relative; overflow:hidden; width:950px; height:250px;
background-image:url('images/background.jpg');
}
.parallax-viewport {
position: relative; /* relative, absolute, fixed */
overflow: hidden;
}
.parallax-layer {
position: absolute;
}
</style>
</head>
<body>
<div id="page-wrap">
<div id="content">
<div id="parallax" class="clear">
<div class="parallax-layer" style="width:1200px; height:250px;">
<img src="images/grass.png" alt="" style="width:1200px; height:250px;"/>
</div>
<div class="parallax-layer" style="width:500px; height:250px;">
<img src="images/frog2.png" alt="" style="width:500px; height:250px;"/>
</div>
<div class="parallax-layer" style="width:1200px; height:300px;">
<img src="images/butterflies3.png" alt="" style="width:1200px; height:300px;"/>
</div>
</div>
</div>
</div> <!-- end page wrap -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11577561-5']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Jika dijalankan tampilan nya sebagai berikut :
Selesai...
Semoga Bermanfaat....
Tidak ada komentar untuk "Membuat animasi gambar dengan jquery parallax"
Posting Komentar
Pengunjung yang baik selalu memberikan masukan / komentar..