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);
            }
        }
     );
});

 

• Category: Free Stuff
• Tag: javascript, jquery