Efecto confetti con Elementor

				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> <script>TweenMax.set("img",{xPercent:"-50%",yPercent:"-50%"})
var total = 70 , container = document.getElementById('container-confetti') ,
w = container.offsetWidth , h = container.offsetHeight;
 for (var i=0 , div ; i<total; i++){ 
  div = document.createElement('div');   div.className='dot';
  container.appendChild(div);
  TweenMax.set(div,{x:R(0,w),y:R(0,100),opacity:1,scale:R(0,0.5)+0.5,backgroundColor:"hsl("+R(170,360)+",50%,50%)"});
  animm(div);
 };
 function animm(elm){   
 TweenMax.to(elm,R(0,5)+3,{y:h,ease:Linear.easeNone,repeat:-1, delay:-5});
 TweenMax.to(elm,R(0,5)+1,{x:'+=70', repeat:-1,yoyo:true,ease:Sine.easeInOut})
 TweenMax.to(elm,R(0,1)+0.5,{opacity:0, repeat:-1,yoyo:true,ease:Sine.easeInOut})
 };
function R(min, max){ return min + ( Math.random() * (max - min)) };</script> 
				
			
				
					.dot{
  width:10px;
  height:10px;
  position:absolute;
  background-color:#00FF00;
  border-radius: 20px;
}
				
			
Si para este tutorial necesitas algún plugin lo podrás encontrar en la pagina de plugins.
Comparte en tus redes sociales

Deja un comentario