Tweenmax Storm

nice storm effect. using TweenMax by GreenSock

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Tweenmax Storm</title>
  
  
  <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
      <div class="content">
            <button id="button">TweenMax Strom</button>
            <div class="img" id="img"></div>          
    </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://peleg.hostrick.co.il/js/TweenMax.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */

.content{
  width: 100%;
  height:800px;
  position: absolute;
  margin: auto;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0px auto;
} 

#button{
  width: 350px;
  height: 50px;
  font-size: 28px;
  position: relative;
  margin: 0px auto;
  top:10px;
  display: block;
}
.img{
  width:280px;
  height:80px;
  position: relative;
  margin: 0px auto;
  top:100px;
  cursor: pointer;
 }
/* Downloaded from https://www.codeseek.co/ */
function obj(src){
  
    var sliceSize = 10;
    var items = [];
    var $this = this;
    this.img;
    var d = new Date().getTime();
    this.id = 'tmax';
    
    var particles = [];
    this.createCanvas = function(){
    
        this.img = new Image();
        this.img.src = src;
    
    this.img.onload = function(){
    
        var obj = createParticles($this.img, this.id,sliceSize);
        this.item = obj;
        $this.item = obj;
        items.push(this.item);
        //console.log(items)
        var parent = document.getElementById('img');
        parent.appendChild(obj);
    }
    
  }
  
  function createParticles(imgObj,id,sliceSize){
        
    //calculating the num of slice(x,y)
		var xSlices = Math.ceil(imgObj.width / sliceSize);
		var ySlices = Math.ceil(imgObj.height / sliceSize);  
    
    //we have slice who are less then the sliceSize. lets calculate them 
    var width_fix = imgObj.width % sliceSize;
    var height_fix = imgObj.height % sliceSize;
		var elem = document.createElement("div");
		particles = new Array();
    
        
	 for(var n = 0; n < xSlices; n++) {
	        for(var i = 0; i < ySlices; i++) {
	          var imgX = n * sliceSize;
	          var imgY = i * sliceSize;
              var wf = (n == xSlices -1 ) ? width_fix : sliceSize;
	          particles.push({x: imgX,y: imgY,imgX: imgX,imgY: imgY,vx: 0,vy: 0,wf: wf});
	        }
	  }
	      
    console.log(particles);
    elem.id = $this.id;
    elem.style.width = imgObj.width+"px";
    elem.style.height = imgObj.height+"px";
    elem.style.position = "absolute";
    elem.style.zIndex = 1;
    var canvas;
    var context;
    
		for(var n = 0; n < particles.length; n++) {
		      
      //create  canvas  for each particle
      var particle = particles[n];
      canvas = document.createElement("canvas");
      canvas.width = sliceSize;
      canvas.height = sliceSize;
      if(particle.wf != sliceSize)
        canvas.width = particle.wf;
      canvas.style.left = particle.x+"px";
      canvas.style.top = particle.y+"px";
      canvas.style.position = 'absolute';
      canvas.style.display = 'none';

      //drawing the tile
      context = canvas.getContext("2d");
      context.drawImage(imgObj, particle.imgX, particle.imgY, sliceSize, sliceSize, 0, 0, sliceSize, sliceSize);    
      elem.appendChild(canvas);

      //lets put the tile outside the screen(x = -1000| y = random)
      TweenMax.to(canvas,0,{x:'-=' + (particle.x - 1500),y:'+=' +getRandom(-450,450)});        
   }
            
   return elem;
		
	}
  
  this.explode = function(id){

		//alert('explode');
		var elem = this.item;
		elem.style.display = "block";
	//	console.log(this.item);
    console.log( this.item.id);
		
		var childrenNum = $("#"+this.item.id).children();
        childrenNum = shuffle(childrenNum);
        
        var tl = new TimelineMax({paused:true});
        //TweenMax.staggerTo(childrenNum,0.3,{top:0,left:0});
        for(var i = 0; i < childrenNum.length; i++) {
            var item = childrenNum.eq(i);
            var w = $(window).width();
            
            var dTime = 0.01 * i;
            TweenMax.to(item,1,{x:getRandom(-1010,813),y:getRandom(-313,810),delay:dTime,display:'block',ease:Power2.easeOut});
       
            TweenMax.to(item,1,{z:getRandom(-200,200),x:getRandom(-1010,813),y:getRandom(-313,810),rotationY:getRandom(0,1560),rotationX:getRandom(0,1560),delay:1 + dTime});
            TweenMax.to(item,0.5,{z:getRandom(-200,200),x:getRandom(-1010,813),y:getRandom(-313,810),rotationY:getRandom(0,1560),rotationX:getRandom(0,1560),delay:2 + dTime});
            TweenMax.to(item,7,{z:getRandom(-200,200),x:getRandom(-1010,813),y:getRandom(-313,810),delay: 2.5+ dTime,ease:SlowMo.ease,scaleX:1,scaleY:1});
            
            if(i%4 == 0)
              var dt = i*0.001;
             else
               var dt = 0;

            TweenMax.to(item,1,{rotationY:0,rotationX:0,x:0,y:0,z:0,delay:10.5 + dt,ease:Power2.easeOut});
            
        }
      
	}
    this.reset = function(){
        console.log($("#"+this.id).children().length);
        $("#"+this.id).empty().remove();
        $("#container").children("div").remove();
        $this.createCanvas();
    }
  
};

$(function(){

    var img;        
    var src_img = "https://peleg.hostrick.co.il/tmax.jpg"
    img = new obj(src_img);
    img.createCanvas();

    $('#button').click(function() {
        img.explode('img');
    });
}); 

function getRandom(min, max) {
    
  return Math.random() * (max - min) + min;
  
}
function shuffle(o){ //v1.0
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

This awesome code ( Tweenmax Storm ) is write by Peleg Schlider, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Peleg Schlider