[React] 모바일 청첩장에 벚꽃 배경 만들기

안녕하세요, 개발자 Sean입니다. 

오랜만에 포스팅할 시간이 생겨서 글을 적어봅니다. 

친형이 결혼을 하게 되어 갑작스레 모바일 청첩장을 만들어 달라는 부탁을 받아

흔쾌히 그러겠다고 했습니다. 

근데 하루도 지나지 않아 언제 다 되는지 주변에서 아우성이네요;;

그냥 뚝딱하면 만들어지는 줄 안 모양입니다 ㅠㅠ

 

 

그래도 친형 결혼식이니 조금은 신경을 써서 만들고 싶어 배경에 예쁜 벚꽃이 휘날리는 그럼 청첩장을

후다닥 만들어 주었습니다. 퇴근하고 쉬질 못하니 엄청 피곤하긴 하네요.

 

아래는 벚꽃이 흩날리는 이펙트의 스크린샷입니다.

시간이 넉넉하면 직접 만들어보고는 싶었는데 기한이 빡빡하다 보니

 

오픈 라이브러리를 이용했습니다. 

 

라이브러리나 오픈 코드들이 여러 개 있긴 했지만 제가 선택한 라이브러리는 react-snowfall입니다.

 

https://www.npmjs.com/package/react-snowfall

react-snowfall

사실 해당 라이브러리는 눈이 떨어지는 모션을 표현하기 위해 만든 라이브러리입니다만, 원하는 이미지를 넣을 수 있기 때문에 

 

눈 대신에 벚꽃 이미지를 넣어 활용했습니다. 

 

아래는 구현 코드입니다. 

 

const snowflake1 = document.createElement('img')
snowflake1.src = '/assets/blossom.png'
const snowflake2 = document.createElement('img')
snowflake2.src = '/assets/blossom.png'
  
const images = [snowflake1, snowflake2];

<Snowfall 
    speed={[0,1.5]}
    images={images}
    radius={[6, 17]}
    snowflakeCount={50}
    style={{
      zIndex: '9999',
      position: 'fixed',
      width: '100vw',
      height: '100vh',
    }}
/>