자바스크립트에서 맥주 탄산 이펙트 만들기

김민규·2023년 3월 26일

엘리스 SW트랙을 진행하다 어쩌다보니 스터디장을 하게 되었다.
나만의 테스트 페이지라는 스터디를 주관하게 되었는데 이번 기회에 예전 부터 만들어보고 싶었던 나와 맞는 맥주 찾기 어플리케이션을 만들어보기로 하였다.

배경

처음에 머릿 속으로 간단하게 UI를 생각했을때 백그라운드에 맥주가 차오르는 모습을 구현하고 싶었다.
그래서 우선적으로 구현해야 할 것들은 차오르는 애니메이션과 탄산 거품 이펙트였다.

사실 차오르는 애니메이션 같은 경우에는 그냥 css에서 bottom이나 translateY를 사용하면 간단하게 해결 할 수 있었다.

하지만 탄산 거품을 처음에 어떻게 표현해야할지 잘 생각이 나지 않아서 그냥 구글에서 투명 레이어 적용된 이펙트 gif를 구해와 백그라운드에 박아넣을 생각이었다.

하지만 생각보다 마음에 드는 소스를 찾기가 힘들어서 그냥 컴포넌트로 구현하는게 속편하겠다는 생각이 들었기에 직접 만들기로 하였다.

-내가 생각했던 이상적인 이미지 소스-

구현과정

Base CSS 작성하기

우선 모든 Bubble 컴포넌트들이 공통적으로 가질 CSS를 작성하였다.

.bubble {
  display: block;
  opacity: 0.3;
  aspect-ratio: 1/1;
  border-radius: 50%;
  position: absolute;
  bottom: 0px;
  border: 1px solid rgb(254, 214, 127);
  background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
}


@keyframes yMove {
  100% {
    bottom: 110%;
  }
}

@keyframes xMove {
  0% {
    transform: translateX(-100px);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(-100px);
  }
}

opacity에 0.3을 할당하여 투명도를 조절하고 aspect-ratio로 가로 세로 비율을 1:1로 고정시켰다
이후 position을 absolute로 지정하여 부모 요소를 기준으로 position을 설정하도록 하였다.

이후 y축 이동을 담당하는 yMove와 x축 이동을 담당하는 xMove 애니메이션을 작성하였다.

Bubble 컴포넌트 구현하기

이후 Bubble의 랜덤한 스타일을 부여하기 위해 컴포넌트를 구현하였다.

//...Bubble.js

import Component from "../cores/Component.js";
import { getRandom } from "../Utils.js";


export default class Bubble extends Component {
  constructor(target, element, state, className) {
    super(target, element, state, className);
    this.setStyle();
  }
  setStyle() {
    this.$element.style.left = getRandom(0, 100, 0) + "%";
    this.$element.style.width = getRandom(8, 40, 0) + "px";
    this.$element.style.animation =
      `yMove ${getRandom(2, 4, 1) + "s"} ${getRandom(0, 2, 1)}s ease infinite, ` + `xMove 3s ${getRandom(0, 2, 1)}s ease infinite`;
  }
}


//...Component.js

export default class Component {
  #target;
  constructor(target, element, state, className) {
    this.state = state;
    this.#target = target;
    this.$element = document.createElement(element);
    if (className) this.$element.className = className;
    this.render();
  }
  render() {
    this.#target.appendChild(this.$element);
  }
}


//...Utils.js

function getRandom(min, max, digit) {
  return (Math.random() * (max - min) + min).toFixed(digit);
}