• Skip to content
  • Skip to primary sidebar

WebOmnizz

Header Right

Image Slicing Effect on hover() with jQuery

March 21, 2013 by Jogesh Sharma 1 Comment

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/

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

 

Related posts:

  1. Create sticky footer with jquery and css
  2. Create tab using jquery and css
  3. Ajax uploader with progress bar in jquery
  4. Keyboard key codes detect with JQuery

Filed Under: Free Stuff Tagged With: javascript, jquery

Primary Sidebar

Recent Posts

  • Custom Image Upload in WordPress
  • Top Python Libraries for Data Science in 2017
  • Laravel 5.5 Pagination for Bootstrap 4
  • Implementing Swift Mailer with Codeigniter
  • Building Simple StopWatch with React-Native

WebOmnizz on Google+

Copyright © 2018