Parallax Hover Demo

HTML

<div class="example text">
    <a href="#" class="parallax" data-imgname="http://preview.vertic.com/vertic/labs/examples/parallaxhover/5/4-6-*.png" data-levels="8" data-space="30">
       dsdsdsd
    </a>
    <a href="#" class="parallax" data-imgname="http://preview.vertic.com/vertic/labs/examples/parallaxhover/5/7-10-*.png" data-levels="8" data-space="30">
        7.-10. klasse
    </a>
</div>

CSS

.example {
    width:640px;
    margin:0 auto;
    position:relative;
}
.parallax {
    display:block;
    position:relative;
    width:360px;
    height:407px;
    margin:-40px 0 0 0;
    /*overflow:hidden;
    padding:30px;*/
    text-indent:-999px;
    background:url(1-5-full.png) center center no-repeat;
    float:left;
}
.parallax:first-child {
    background-image:url(4-6-full.png);
    width:440px;
    height:361px;
    margin:0 -160px 0 0;
}
.parallax .level {
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-position:center center;
    background-repeat:no-repeat;
} 
.parallax.enhanced,
.parallax.enhanced:first-child {
    background:none;
}

JavaScript

// Image Preload - v1.2 - https://github.com/farinspace/jquery.imgpreload
    if("undefined"!=typeof jQuery){(function(a){a.imgpreload=function(b,c){c=a.extend({},a.fn.imgpreload.defaults,c instanceof Function?{all:c}:c);if("string"==typeof b){b=[b]}var d=[];var e=b.length;for(var f=0;f<e;f++){var g=new Image;a(g).bind("load error",function(b){d.push(this);a.data(this,"loaded","error"==b.type?false:true);if(c.each instanceof Function){c.each.call(this)}if(d.length>=e&&c.all instanceof Function){c.all.call(d)}});g.src=b[f]}};a.fn.imgpreload=function(b){var c=[];this.each(function(){c.push(a(this).attr("src"))});a.imgpreload(c,b);return this};a.fn.imgpreload.defaults={each:null,all:null}})(jQuery)}
    
    // DOM ready
    $(document).ready(function(){
      var _ParallaxHover = function(el){
        // Set up handle
        var t = this, $orig = $(el);
        
        // Extend object with handy variables
        t.$link = $orig.clone().addClass('enhanced');
        t.levels = parseInt(t.$link.data('levels'));
        t.space = parseInt(t.$link.data('space'));
        t.imgName = t.$link.data('imgname');
        t.images = new Array();
        t.pos = $orig.offset();
        t.dim = {w:$orig.outerWidth(),h:$orig.outerHeight()};
        t.$levels = $();
        t.threshold = 1;
        t.cPos = {x:t.dim.w/2,y:t.dim.h/2};
        t.tPos = {x:t.cPos.x,y:t.cPos.y};
        t.vPos = {x:0,y:0};
        t.interval;
        t.isLooping = false;
        
        // Set up elements and bind events
        if (t.levels > 0 && t.space > 0 && t.imgName.indexOf('*') > -1) {
          for (var i = 0; i < t.levels; i++) {
            (function(){
              var levelImgName = t.imgName.replace('*',i),
              index = i+1,
              mid = Math.round(t.levels/2),
              dist = (index - mid)/(t.levels-mid),
              $level = $('<span />')
                .addClass('level')
                .data('dist',dist)
               ...