"span anime"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrapper"><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"> 4.-6. klasse </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></div>
.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(http://preview.vertic.com/vertic/labs/examples/parallaxhover/5/7-10-full.png) center center no-repeat; float:left; } .parallax:first-child { background-image:url(http://preview.vertic.com/vertic/labs/examples/parallaxhover/5/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; }
// 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).css('background-image', 'url(' + levelImgName + ')').prependTo(t.$link); t.$levels.push($level); t.images.push(levelImgName); })(); } t.$link.mousemove(function(e) { var mPos = { x: e.pageX, y: e.pageY }, xPos = mPos.x - t.pos.left, yPos = mPos.y - t.pos.top; t.tPos = { x: xPos, y: yPos }; t.startAnimationLoop(); }).mouseenter(function() { t.startAnimationLoop(); }).mouseleave(function() { t.tPos.x = t.dim.w / 2; t.tPos.y = t.dim.h / 2; }); $.imgpreload(t.images, function() { $orig.replaceWith(t.$link); }); } // Return object return this; }; _ParallaxHover.prototype.animateTo = function(x, y) { var t = this; t.tPos = { x: x, y: y }; t.startAnimationLoop(); }; _ParallaxHover.prototype.startAnimationLoop = function() { var t = this; if (!t.isLooping) { t.isLooping = true; t.interval = setInterval(function() { t.animationLoop(); }, 35); } }; _ParallaxHover.prototype.setPosition = function() { var t = this; t.$levels.each(function() { var $level = $(this); $level.css({ 'top': -((t.cPos.y / t.dim.h) * 2 - 1) * t.space * $level.data('dist'), 'left': -((t.cPos.x / t.dim.w) * 2 - 1) * t.space * $level.data('dist') }); }); return t.cPos; }; _ParallaxHover.prototype.animationLoop = function() { var t = this, x = (t.tPos.x - t.cPos.x), y = (t.tPos.y - t.cPos.y); t.vPos.x *= 0.7; t.vPos.y *= 0.7; x *= 0.10; y *= 0.10; t.vPos.x += x; t.vPos.y += y; t.cPos.x += t.vPos.x; t.cPos.y += t.vPos.y; if (t.vPos.x >= t.threshold || t.vPos.y >= t.threshold || t.vPos.x <= -t.threshold || t.vPos.y <= -t.threshold) { t.setPosition(); } else { t.isLooping = false; clearInterval(t.interval); } }; $('.parallax').each(function() { window.parallaxHover = new _ParallaxHover(this); }); });

Related: See More


Questions / Comments: