Membuat Efek Cool Spotlight dengan jQuery ~ fotokopi

Monday, April 25, 2011

Membuat Efek Cool Spotlight dengan jQuery

10:26 PM

Unknown

Dalam tutorial ini kita akan membuat efek yang bagus
dan menakjubkan. Seperti pada portofolio yang dibuat

oleh desainer asal Argentina. Lihat DEMOnya di sini.

Berikut ini adalah cara membuatnya :

1.   Masuk Edit HTML.

2.   Cari kode </head>

3.   Letakkan kode berikut ini di atas.

<script type="text/javascript"  charset="utf-8" src='js/jquery.js'></script><br />   <script type="text/javascript" charset="utf-8">    $(window).load(function(){    var spotlight = {      // the opacity of  the "transparent" images - change it if you like     opacity : 0.2,       /*the vars bellow are for width and height of the images so we can make       the <li> same size */     imgWidth : $('.spotlightWrapper ul  li').find('img').width(),      imgHeight : $('.spotlightWrapper ul  li').find('img').height()          };        //set the width and height  of the list items same as the images    $('.spotlightWrapper ul  li').css({ 'width' : spotlight.imgWidth, 'height' : spotlight.imgHeight  });        //when mouse over the list item...    $('.spotlightWrapper ul  li').hover(function(){          //...find the image inside of it and  add active class to it and change opacity to 1 (no transparency)      $(this).find('img').addClass('active').css({ 'opacity' : 1});           //get the other list items and change the opacity of the images inside  it to the one we have set in the spotlight array       $(this).siblings('li').find('img').css({'opacity' : spotlight.opacity}) ;           //when mouse leave...    }, function(){          //... find  the image inside of the list item we just left and remove the active  class     $(this).find('img').removeClass('active');         });         //when mouse leaves the unordered list...    $('.spotlightWrapper  ul').bind('mouseleave',function(){     //find the images and change the  opacity to 1 (fully visible)     $(this).find('img').css('opacity', 1);     });       });  </script><br />  <style type="text/css"  media="screen">   body { background:black; color:white; font-family:  'georgia' } /* not important */   .spotlightWrapper ul {      list-style-type: none; /* remove the default style for list items (the  circles) */     margin:0px; /* remove default margin */    padding:0px;  /* remove default padding */   }   .spotlightWrapper ul li {      float:left; /* important: left float */    position:relative; /* so we  can use top and left positioning */   }   .spotlightWrapper ul li a img {      width:200px; /* you don't need this, i just rescaled the images  they are bigger then i want them to be ' */    position:relative; /* so  we can use top and left positioning */    border:none; /* remove the  default blue border */   }   .spotlightWrapper ul li a img.active {     border:4px solid white; /* choose whatever you like */    z-index:1; /*  show it on top of the other images (they have z-index 0) */    left:  -4px; /* same as border width but negative */    top: -4px; /* same as  border width but negative */   }   .clear { clear:both; } /* to clear  the float after the last item */  </style>

4. Cari lagi kode <body>

5. Letakkan kode berikut ini di bawahnya.

<br />  <div class='spotlightWrapper'>  <br /> <br />   <ul>    <li><a href='#'><img src='URL image 1 anda'  /></a></li>    <li><a href='#'><img  src='URL image 2 anda' /></a></li>    <li><a  href='#'><img src='URL image 3 anda' /></a></li>     <li><a href='#'><img src='URL image 4 anda'  /></a></li>    <li><a href='#'><img  src='URL image 5 anda' /></a></li>    <li><a  href='#'><img src='URL image 6 anda' /></a></li>     <li><a href='#'><img src='URL image 7 anda'  /></a></li>    <li><a href='#'><img  src='URL image 8 anda' /></a></li>     <li><a  href='#'><img src='URL image 9 anda' /></a></li>     <li><a href='#'><img src='URL image 10 anda'  /></a></li>    <li><a href='#'><img  src='URL image 11 anda' /></a></li>    <li><a  href='#'><img src='URL image 12 anda' /></a></li>     <li><a href='#'><img src='URL image 13 anda'  /></a></li>    <li><a href='#'><img  src='URL image 14 anda' /></a></li>    <li><a  href='#'><img src='URL image 15 anda' /></a></li>     <div class='clear'></div>  </ul><br />    <br />  </div>

6. Kode tersebut bisa juga anda letakkan
pada gadget HTML/JavaScript.

KETERANGAN :

*   Gantilah ke-15 (lima belas) gambarnya
    dengan gambar milik anda.

*   Usahakan gambar tersebut dalam ukuran
    yang sama, baik width maupun heightnya.

Selamat Mencoba,

Posted in: Tips blog,trik blog

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Design by Wordpress Theme | Bloggerized by Free Blogger Templates | coupon codes