Latest News

Home » Tips blog » trik blog » Membuat Efek Cool Spotlight dengan jQuery

Membuat Efek Cool Spotlight dengan jQuery

Unknown

Tips blog, trik blog

Tuesday, April 26, 2011

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,

0 Response to "Membuat Efek Cool Spotlight dengan jQuery"

Subscribe to: Post Comments (Atom)