Image Slicing Effect on hover() with jQuery

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

 

Posted by Jogesh Sharma

Jogesh Sharma is a web developer and blogger who loves all the things design and the technology, He love all the things having to do with PHP, WordPress, Joomla, Magento, Durpal, Codeigniter, jQuery, HTML5 etc. He is the author of this blog.