How do Jquery Nivo Slider transitions work?

Question

I'm wondering how to create the Jquery Nivo Slider transition effect, not creating the entire plugin. I tried playing with CSS's clip property but I couldn't get it to create the effect where part of the image fades or moves out block by block until the next slide shows.

If anyone has a general idea or specific code of how to make the transition effects, it would be appreciated thanks.

Tigra · Answer 1 · 2011-11-19T11:48:01.003

The generic idea is following: You have div with first image and then you have big number of divs with second image, you spawn them adjusting css properties

Each second image div is just a small piece of it with adjusted background, so it overlays previous image, part of it

With this method you can spawn pieces in any order you want with any effect you want. Slide them in, fade them im, randomally fill, anything

Html will look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
    .first{
        height:500px;
        width:500px;
        position: absolute;
        background:url(1.jpg);
        z-index: 2;

    }

    .second_part1{
        height:50px;
        width:50px;
        position: absolute;
        background:url(2.jpg) 0 0;
        z-index: 2;

    }

    .second_part2{
        height:50px;
        width:50px;
        position: absolute;
        background:url(2.jpg) -50px 0;
        left:50px;
        z-index: 2
    }

    .second_part3{
        height:50px;
        width:50px;
        position: absolute;
        background:url(2.jpg) -200px -150px ;
        left:200px;;
        top:150px;
        z-index: 2
    }
</style>
</head>
<body>
    <div class="first">
    </div>
    <div class="second_part1">
    </div>
    <div class="second_part2">
    </div>
    <div class="second_part3">
    </div>
</body>
</html>

And you also can have another image2 div, which will be shown up after you have loaded all pieces. And destroy all pieces after you show it up

There are plenty of ways to impement whole proccess on javascript As for me first of all make array of pieces(array of divs) and then you can create any number of effects you want, just by displaying them with different effects and different order

I do not know if nivo uses this way or some other, but this works :)

score 2 · Answer 2 · answered Mar 23 '13 at 09:07

Just dropped to this page via Google while finding a solution to my NivoSlider problem.

NivoSlider, basically just create some div element as image replacement, then take the image URL to be used as background image with different background position for each pieces that will be animated later:

// Set the slices size
var slice_w = $slider.width() / config.slices,
    slice_h = $slider.height();

// Build the slices
for (var i = 0; i < config.slices; i++) {
    $('<div class="slice" />').css({
        'position':'absolute',
        'width':slice_w,
        'height':slice_h,
        'left':slice_w*i,
        'z-index':4,
        'background-color':'transparent',
        'background-repeat':'no-repeat',
        'background-position':'-' + slice_w*i + 'px 0'
    }).appendTo($slider);
}

// Change the background image when slideshow starts from here... etc etc...

Here's an example I'v made long time ago: http://reader-download.googlecode.com/svn/trunk/simple-useful-jquery-slideshow_nivo-slider-like-effect.html

How do Jquery Nivo Slider transitions work?

2 Answers2