팀프로젝트 'freefes' 시연 및 발표 영상

전국 지역행사 플랫폼으로 개발한 freefes 웹 사이트를 시연하며 그에 대한 설명을 하는 영상입니다.

해당 코드 github 주소는 https://github.com/dungeong/freefes_portfolio 입니다.

해당 영상에서는 발표 시간의 구애 때문에 폭죽놀이 이벤트에 대해 설명하지 못하였지만,

function createFirework() {
    const firework = document.createElement("div");
    firework.className = 'firework';
  
    for (let i = 0; i < 50; i++) {
        const trail = document.createElement('div');
        trail.className = 'trail';
        trail.style.backgroundColor = getRandomColor();
        trail.style.transform = `rotate(${Math.random() * 360}deg)`;
        trail.style.animationDelay = `${Math.random() * 0.3}s`;
        firework.appendChild(trail);
    }
    firework.style.left = Math.random() * window.innerWidth + "px";
    firework.style.bottom = Math.random() * window.innerWidth + "px";
    firework.style.scale = Math.random();
    document.body.appendChild(firework);
    setTimeout(() => {
        firework.remove();
    }, 2000);
  };
  
  function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }

해당 java script코드에서 div가 360도 이내의 랜덤한 방향으로 50개가 랜덤한 색상으로 생성됩니다. 그리고 각자 div에 animationDelay를 0.3초 이내에 랜덤하게 주어서 나중에 애니메이션에서 선이 뻗어나가는 모습을 각자 다른 시간으로 하게끔 해놓았습니다.
해당 div뭉치는 디스플레이 크기 내에서 랜덤한 위치에 랜덤한 크기로 생성됩니다.
또한 생성 후 2초 뒤에 해당 div뭉치들이 제거되도록 하였습니다.

 /* 불꽃놀이 */
  
  .firework {
    position: absolute;
    bottom: 0;
    animation: bottomToTop 2s;
    z-index: -1;
  }
  
  .trail {
    position: absolute;
    bottom: -300px;
    width: 2px;
    height: 3px;
    opacity: 0;
    animation: explode 2s;
    transform-origin: bottom;
    
  }
  @keyframes bottomToTop {
  	0% { margin-bottom: -300px; }
  	50% { margin-bottom: 300px; }
  	100% { margin-bottom: 300px;}
  }
  
  @keyframes explode {
    0% {
      opacity: 1;
      height: 3px;
    }

    50% {
        opacity: 1;
        height: 3px;
    }
    80% {
        opacity: 0.8;
        height: 400px;
    }

    100% {
      opacity: 0;
      height: 400px;
    }
  }

해당 div뭉치는 CSS의 animation을 통하여 해당 불꽃뭉치가 1초간 -300px에서 +300px의 높이만큼 올라가며 그 후에 각 div들이 뻗어나가서 0.6초 후부터 서서히 사라지는 것 처럼 보이도록 하였습니다.

해당 코드에는 안 나와 있지만 'setInterval(createFirework, 800);' 로 0.8초에 불꽃놀이 하나씩 생성되도록 하였습니다.

이외에 게시판의 CRUD 기능 외 본인이 만든 코드들이 많았지만 수업에서 배우지 않은 독특한 기능을 보여주고 싶었기에, 주요기능 설명부분으로 해당 코드들을 설명하였습니다.