Sprite image animation effect on hover over parent image for Timeline Preview

0 945

Sprite Image is the collection of images combined together in a particular pattern. Since they are of small file size as compared to the collective file size of all the images taken separately. In this tutorial, you will learn how to use the sprite image for showing the preview of the timeline on mouse hover over the parent abstract image using jQuery.

This is particularly useful when the parent image is the abstract image of the timeline and the sprite image contains the preview images of the timeline. For example, in Youtube player, you can see the preview of the video by hovering the mouse pointer on the video progress timeline.

Demo  Download

CSS:

.imgholder {
    float: left;
    position: relative;
    border: 1px solid #000;
}
.imgholder a {
    text-decoration: none;
}
.imgholder .thumb {
    display: block;
    height: 200px;
    width: 250px;
}
.imgholder .hSprite {
    background-repeat: no-repeat;
    height: 200px;
    left: 0;
    position: absolute;
    top: 0;
    width: 250px;
    z-index: 2;
}
.hRotator span.imgloader {
    float: right;
    background-image: url("loadSprite.gif");
    background-position: 0 0;
    background-repeat: no-repeat;
    border-radius: 2px;
    display: block;
    font-size: 1px;
    height: 10px;
    left: 200px;
    position: absolute;
    top: 2px;
    width: 31px;
    z-index: 1;
}
.clearfix{
    clear: both;
    margin-bottom: 10px;
}

HTML code for the image div:

In the below HTML code, two img tags are used. The first one is for the parent image, which is the abstract image. And second img tag is used for the sprite img placeholder which on the mouse hover event used for displaying the sprite image.

<div class="imgholder">
   <a href="http://www.bitnol.com/?p=2539" class="hRotator">
   <img src="img.png" width="250" height="200" class="thumb" alt="test">
   <img class="hSprite" src="spacer.gif" sprite="colorsprite.png" id="3703155" onmouseover="hRotator.start2(this);" style="background-position: 0px 0px;">
   </a>
</div>

Sprite Image:

This is used for displaying the timeline preview.

jQuery Code:

The below code is pre-configured for sprite images with 10 child images in the horizontal rail. In order to change the child images configuration, edit line no 80 in the below code accordingly.

$(document).ready(function() {
    $('.hSprite').bind('mouseover', hRotator.start).bind('mouseout', hRotator.stop).bind('click', hRotator.click);
});

var hRotator = {
    'timer': 0,
    'cache': {},
    'id': 0,
    'curr': false,
    'stopped': true,
    'clicked': false,
    'time': 0
};

hRotator.click = function(e) {
    if (typeof(Modernizr) != 'undefined' && Modernizr.touch && !hRotator.clicked && ($.now() - hRotator.time) < 300) {
        hRotator.clicked = true;
        e.stopPropagation();
        e.preventDefault();
        if (hRotator.stopped) hRotator.start.call(this);
    }
}

hRotator.start2 = function(el) {
    var t = $(el);
    t.bind('mouseout', hRotator.stop);
    hRotator.start.call(el);
}

hRotator.start = function(e) {
    var t = $(this);
    hRotator.stop();
    hRotator.curr = t;
    hRotator.id = t.attr('id');
    hRotator.time = $.now();
    hRotator.curr.css('background-position', '0 0');
    if (!hRotator.cache[hRotator.id]) {
        img = new Image();
        img.loaded = false;
        hRotator.cache[hRotator.id] = img;
        img.vid = hRotator.id;
    } else img = hRotator.cache[hRotator.id];
    hRotator.stopped = false;
    if (!img.loaded) {
        t.parent().append('<span class="imgloader"></span>');
        hRotator.loader = $('span.imgloader', t.parent());
        $(img).bind('load', hRotator.onLoad);
        img.src = t.attr('sprite');
    } else {
        hRotator.begin();
    }
}

hRotator.stop = function() {
    hRotator.stopped = true;
    hRotator.clicked = false;
    clearTimeout(hRotator.timer);
    if (hRotator.curr) {
        hRotator.curr.css({
            'background-image': ''
        });
        if (hRotator.loader) {
            hRotator.loader.remove();
            hRotator.loader = false;
        }
    }
    hRotator.id = false;
    hRotator.curr = false;
    hRotator.loader = false;
}

hRotator.onTime = function(num) {
    var imgw = $('.imgholder .thumb').width();
    clearTimeout(hRotator.timer);
    if (hRotator.stopped) {
        hRotator.stop();
        return true;
    }
    num++;
    if (num > 9) num = 0;
    pos = (num * -imgw) + 'px 0px';
    hRotator.curr.css({
        'background-position': pos
    });
    hRotator.curr.css({
        'background-size': 'cover'
    });
    hRotator.timer = setTimeout('hRotator.onTime(' + num + ')', 500);
}

hRotator.onLoad = function(e) {
    this.loaded = true;
    if (this.vid != hRotator.id) {
        return true;
    }
    hRotator.begin();
}

hRotator.begin = function() {
    if (hRotator.loader) {
        hRotator.loader.remove();
        hRotator.loader = false;
    }
    hRotator.curr.css({
        'background-position': '0 0'
    });
    hRotator.curr.css({
        'background-image': 'url(' + hRotator.curr.attr('sprite') + ')'
    });
    hRotator.onTime(-1);
}

Although here the application is implemented for timeline preview, it can be used for other purposes also with little modification in the code.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More