#14-撒花～Button庆祝动态自己来！～ (JS)

敝人很常踩到诈骗网站，第一屏就是一个庆祝的小动画，
恭喜我中奖（~~好想中威力彩啊~~）

网页也很常有这种奖励使用者的小动画，譬如说送出一个订单、
或是帮忙写了一个评价，我自己是看到这样的动画心情都满好的，
所以自己也来做一个！
也先庆祝完赛的大家们 ٩(✿∂‿∂✿)۶
我还在跑呢...

这次主要是使用：

使用SCSS来控制样式(宽度、左右、颜色)和动画（2种旋转和50种掉落位置）

使用JS来制作彩带、三角形和长方形等DOM

主要参考：

SCSS写法主要参考这边，
用SCSS的@for让animation变得很乾净～
JS参考这个影片

我自己另外用CSS做了三角形和彩带，让画面感丰富一点！
还有很多细节可以调整。（譬如说三角形和长方形直直下来不是很开勳）

上code!

//HTML就是一个box啦！不写了
//SCSS
//略过不重要的container&button夜市
//重点来了！
$colors: (red, green, blue, yellow, purple, orange, pink);
$num: 50;

@for $i from 0 through $num {
  $w: random(20); //宽度的随机变数
  $l: random(100); //位置left的随机变数
 
  
//长方形的家伙
  .confetti{
    &:nth-child(#{$i}){
      position: absolute;
      width: #{$w}px;
      height: #{$w*0.4}px;
      background-color: nth($colors, random(7));
      top: -10%;
		//unquote()会让这一串出来没有引号，才会正常运作不然拿掉试试看
		//做了一个向上喷射再次往下掉的动画 & 一直旋转的动画
		//animation-delay和不同的duration会让大家位置错开，就算是同一个left
      animation: drop-#{$i} unquote(5+random()+"s") unquote(random()+"s") 1, 
spin-#{random(3)} 0.3s ease infinite;
      }
    }
  
//三角形的东东
  .tri{
		//JS是先生出50个长方形再长出三角形的，就依照顺序 50 + 1/ 50+2...这样下去辣
    &:nth-child(#{$num + $i}){
        position: absolute;
        top: -10%;
        border-bottom: #{$w * 1.5}px solid nth($colors, random(7));
        border-right: #{$w/2}px solid transparent;
        border-left: #{$w/2}px solid transparent;
        animation: drop-#{$i} unquote(5+random()+"s") unquote(random()+"s") 1, 
spin-#{random(3)} 0.3s ease infinite;
         }
  }
  
//彩带
  .ribbon{
    &:nth-child(#{$num*2 + $i}){
      position: absolute;
      top: -10%;
      animation: drop-#{$i} unquote(5+random()+"s") unquote(random()+"s") 1, spin-#{random(3)} 0.3s ease infinite;
      
      &:before{
        content: '';
        width: #{$w}px;  
        height: #{$w}px;
        position: absolute;
        border-radius: 50%;
        border-left: 5px solid nth($colors, random(7));    
        transform: translate(35%,-90%);
      }
      &:after{
        content: '';
        width: #{$w}px;  
        height: #{$w}px;
        position: absolute;
        border-radius: 50%;
        border-right: 5px solid nth($colors, random(7));
      }
    }
}

//这个会做出50个版本，让大家都掉在不同地方    
  @keyframes drop-#{$i} {
   0%{
      top: 100%;
      left: 50%;
    }
    10%{
      top: -10%;
    }
    100% {
      top: 150%;
      left: unquote($l+"%");
      opacity: 0;
    }
  }
}

//旋转！就两个版本辣
  @keyframes spin-1{
    to{
      transform: rotate3d(1,0,0,360deg);
    }
  }
  @keyframes spin-2{
    to{
      transform: rotate3d(0,1,0,360deg);
    }
  }

//JS

function confettiFalling() {
  
	var box = document.getElementById("box");

	//先清空，才可以一直点击～
      box.innerHTML = '';

    //做50个！长方形
	for (var i = 0; i < 50; i++) {
		var div = document.createElement("div");
		div.classList.add("confetti");
		box.appendChild(div);
	}
  
    //做50个！三角形
	for (var i = 0; i < 50; i++) {
		var div = document.createElement("div");
		div.classList.add("tri");
		box.appendChild(div);
	}
  
  //做50个！彩带
  for (var i = 0; i < 50; i++) {
		var ribbon = document.createElement("div");
		ribbon.classList.add("ribbon");
		box.appendChild(ribbon);
	}

}

const button = document.querySelector('button');
button.addEventListener('click',()=>{confettiFalling();});