jQuery one of the most popular JavaScript Library which helps a lot to designers, to make effective designs and animations for there clients. In this article we divide a full image into slices and repositioned it, and collect that slice on mouse hover.
http://webomnizz.com/demo/slicing-effect-with-jquery/
|
1 2 3 4 5 |
<div id="imgSliceCon"> <div class="sliceCon"> <img src="img/Lighthouse.jpg" alt="WebOmnizz Slicing Effect" title="WebOmnizz Slicing Effect" /> </div> </div> |
CSS Section:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#imgSliceCon{ overflow: hidden; width: 1024px; height: 400px; position: relative; margin: 0 auto; } #imgSliceCon div.sliceCon{ position: relative; width: 1024px; height: 400px; overflow: hidden; } |
jQuery Section:
Please make sure to add the jquery library before this jQuery snippet.
|
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 |
$(document).ready(function(){ var $sliceContainer = $(".sliceCon"), $containerWidth = $sliceContainer.width(), $containerHeight = $sliceContainer.height(), $numOfSlices = 10, $defaultTopMove = 10, $img; $('img', $sliceContainer).css('display', 'none'); for(var $i=0;$i<$numOfSlices;$i++) { $img = $sliceContainer.find('img').attr('src'); var $html = ""; $html += "<div class='img_"+$i+"' style='width:"+($containerWidth / $numOfSlices)+"px;height:"+$containerHeight+"px;left:"+($containerWidth / $numOfSlices * $i)+"px;position:absolute;overflow:hidden;'>"; $html += "<img style='position:absolute;left:-"+($containerWidth / $numOfSlices * $i)+"px;"+($i % 2 != 0 ? "top:-"+$defaultTopMove+"px;": "")+"' src='"+$img+"'>"; $html += "</div>"; $($html).appendTo($sliceContainer); } // Fix Image on Mouse Hover $sliceContainer.hover( function() { // Mouse IN $(this).find('img').animate({top: "0px"}, 100); }, function(){ // Mouse Out // Reset Default Position for($j=0;$j<$numOfSlices;$j++) { if($j % 2 != 0) $('.img_'+$j).find('img').animate({top: "-"+$defaultTopMove+"px"}, 100); } } ); }); |