JSFiddle - React, Tailwind, and code Playground

by joecritch

HTML

<div id="platforms-teaser">
  <img src="http://impactjs.com/files/platforms/internet-explorer.png" alt="Internet Explorer">
  <img src="http://impactjs.com/files/platforms/opera.png" alt="Opera">
  <img src="http://impactjs.com/files/platforms/firefox.png" alt="Firefox">
  <img src="http://impactjs.com/files/platforms/chrome.png" alt="Chrome" >
  <img src="http://impactjs.com/files/platforms/iphone.png" alt="iPhone">
</div>

CSS

#platforms-teaser {
    position: relative;
    left: -160px;
    height: 450px;
    width: 920px;
}

#platforms-teaser img {
    position: absolute;
    top: 30px;
    left: 253px;
    width: 413px;
    height: 390px;
}

JavaScript

(function($) {
    var time = 600;
    var init = function( container ) {
        container.mouseenter(enter);
        container.mouseleave(leave);        
    };
    
    var enter = function( ev ) {
        animate( ev, true );
    };
    
    var leave = function( ev ) {
        animate( ev, false );
    };
    
    var animate = function( ev, spread ) {
        
        var container = $(ev.currentTarget);
        var containerSize = {
            width: container.width(),
            height: container.height()
        };
        
        var items = container.children();
        var numItems = container.children().length;
        var itemSize = {
            width: items.width(),
            height: items.height()
        };
        if( !itemSize.width ) {
            return;
        }
        
        var maxX = containerSize.width - itemSize.width;
        var centerX = maxX/2;
    
        var maxY = containerSize.height - itemSize.height;
        var centerY = maxY/2;
        
        var mvX = spread ? 1 : 0;
        var mvY = spread ? 1 : 0;
        
        items.each(function( index ){
            var idx = (index/(numItems-1))*2-1;
            var tx = centerX + idx * mvX * maxX/2;
            var ty = centerY + idx * mvY * maxY/2;
            $(this).stop().animate({left: tx, top: ty},time);
        });
    };
    
    $.fn.explode = function() {
        this.each(function(index) {
            init( $(this) );
        });
    };
    
    $('#platforms-teaser').explode();
    
})(jQuery);