Image Slicing Effect on hover() with jQuery
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/
<div id="imgSliceCon"> <div class="sliceCon"> <img src="img/Lighthouse.jpg" alt="WebOmnizz Slicing Effect" title="WebOmnizz Slicing Effect" /> </div> </div>
CSS Section:
#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.
$(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);
}
}
);
});
