[해피CGI][cgimall] Star trails

마우스 따라 별이 생기는 효과입니다.
코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다.

 

HTML

<h1> Move your mouse around</h1>

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap'); .star {   transform-style: preserve-3d;   width: 1px;   height: 1px;   position: absolute;   color: red; } .star:before {   position: absolute;   content: '\2726';   color: inherit;   inset: 0;   //box-shadow: 0 0 1em .5em #a3c2;   //filter: drop-shadow(0 0 .5em white);   text-shadow: 0 0 .8em #fff5; } body {   margin: 0;   min-height: 100vh;   font-family: 'Montserrat', sans-serif;   color: #F9F6EF;   display: grid;   place-content: center;   background-image:      radial-gradient(     circle at 50% 50%,       #2f3040,       #1f2020     ); }

 

JS

let x1=0, y1=0; window.client const    vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0),   dist_to_draw = 50,   delay = 1000,   fsize = [     '1.1rem', '1.4rem', '.8rem', '1.7rem'   ],   colors = [   '#E23636',   '#F9F3EE',   '#E1F8DC',   '#B8AFE6',   '#AEE1CD',   '#5EB0E5' ],   rand = (min, max) =>      Math.floor(Math.random() * (max - min + 1)) + min,   selRand = (o) => o[rand(0, o.length -1)],   distanceTo =  (x1, y1, x2, y2) =>      Math.sqrt((Math.pow(x2-x1,2))+(Math.pow(y2-y1,2))),   shouldDraw = (x, y) =>      (distanceTo(x1, y1, x, y) >= dist_to_draw),   addStr = (x, y) => {     const str = document.createElement("div");     str.innerHTML = '✦';     str.className = 'star';     str.style.top = `${y + rand(-20,20)}px`;     str.style.left = `${x}px`;     str.style.color = selRand(colors);     str.style.fontSize = selRand(fsize);     document.body.appendChild(str);     //console.log(rand(0, 3));     const fs = 10 + 5 * parseFloat(getComputedStyle(str).fontSize);     //console.log(vh, y, fs);     //console.log((y+fs)>vh?vh-y:fs);     str.animate({       translate: `0 ${(y+fs)>vh?vh-y:fs}px`,       opacity: 0,       transform: `rotateX(${rand(1, 500)}deg) rotateY(${rand(1, 500)}deg)`     }, {       duration: delay,       fill: 'forwards',       });     //could add a animation terminate listener, but why add the additional load     setTimeout(() => {         str.remove();       }, delay);   }   addEventListener("mousemove", (e) => {   const {clientX, clientY} = e;   if(shouldDraw(clientX, clientY)){     addStr(clientX, clientY);     x1 = clientX;     y1 = clientY;   } });