본문 바로가기

Smart

홈페이지나 웹페이지에 벚꽃 꽃잎 떨어지며 날리는 효과 html 소스


오늘 소개해드리는 내용은 벚꽃 꽃잎이 떨어지며 날리는 스크립트 소스입니다. 


따뜻한 봄이 오고 여기저기서 벚꽃 축제가 한창이라 우리 홈페이지나 웹페이지에도 벚꽃잎이 날리게 바꿔보고 싶으신 분들이 많을거라 생각헤요.


일전에 소개해드렸던 눈 내리는 소스가 궁금하신 분은 아래 링크에서 확인해보시기 바래요.


실제로 네이버 웨일 브라우져에도 벚꽃 꽃잎이 날리고 있더라구요.




현재 제 티스토리 블로그에도 적용시켜놔서 이글을 보고 있는 순간에도 벚꽃잎이 날리고 있을거에요.


- 적용 방법 -


적용시키는 방법은 css 파일과 script 파일 추가하고 경로만 잡아주면 되니 그렇게 어렵지 않답니다. 


head/head 사이에는 아래 첨부해드리는 css 소스 파일 경로를 넣어주면 되구요.

jquery-sakura.css


스크립트는 /body 위쪽에 js 소스 파일 경로를 잡아주시고 스크립트를 적용하시면 된답니다.

jquery-sakura.js


벚꽃 꽃잎 떨어지며 날리는 효과가 적용된 모습입니다. 


See the Pen dmQRaX by kenshin (@parkgun) on CodePen.

벚꽃 꽃잎이 떨어지는 속도를 더 빠르게 하고 싶다면 js 파일에서 fallSpeed: 3 이부분을 찾아 숫자를 낮춰주면 더 빠르게 떨어집니다.


벚꽃 구경 못가고 이걸로 만족하고 있는게 웃프기도 하네요 ㅠ.ㅠ



도움 되셨길 바라며 이상으로 홈페이지나 웹페이지에 벚꽃 꽃잎 떨어지며 날리는 효과 html 소스에 대한 포스팅을 마칩니다. 



메인 이미지 [출처] Free images by pngtree.com