Beranda / parallax

Membuat animasi gambar dengan jquery parallax

Oleh Juniawan89 Posting Komentar
Berikut ini script untuk membuat animasi dengan jQuery Parallax simpan dengan nama index.html

<!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 :


Download code lengkap 
disini

Selesai...
Semoga Bermanfaat....

Tidak ada komentar untuk "Membuat animasi gambar dengan jquery parallax"

Posting Komentar

Pengunjung yang baik selalu memberikan masukan / komentar..