비 내리는 효과 및 빗방울 맺히는 효과 html/css 소스

오늘 소개해드리는 내용은 비내리는 효과 및 빗방울 맺히는 효과 html/css 소스입니다. 

홈페이지나 웹페이지에 운치있게 비내리는 효과나 빗방울 맻히는 효과를 적용해보고 싶을때가 있을텐데요.

아래 css와 js 파일을 이용하면 비내리는 효과 및 빗방울 맺히는 효과를 줄 수 있습니다. 

참고로 눈내리는 효과는 일전에 한번 소개해드렸는데요. 아래 링크에서 확인해보시면 된답니다.

2017/12/07 - [Smart] - 반응형 홈페이지/웹페이지 배경 눈내리는 효과 html 소스

그럼 먼저 적용된 효과를 먼저 보실까요? 아래 버튼을 눌러보시면 됩니다. 

글루미(gloomy)한 도시에 비가 추적추적 내리면서 빗방울이 하나씩 둘씩 맺히고 있네요^^

아래 두 이미지를 비교해보면 비가 점점 유리창에 맺히고 있는 모습이 확연하게 차이가 있는 걸 보실수 있답니다.

빗방울이 조금 맺힌

빗방울이 많이 맺힌

이런 효과는 아래 css와 js 소스를 적용해주면 된답니다.

storm_style.css

storm_index.js

그리고 html을 적용해주면 비내리는 효과 및 빗방울 맺히는 효과가 적용된답니다.

직접 해보시면 그렇게 어렵지 않을 거에요.

  
       <--- 첨부한 css 파일 업로드 경로

      




 <--- 첨부한 js 파일 업로드 경로

도움이 되셨나요? 

다음번에도 멋진 효과가 적용된 소스를 소개해드릴게요^^

그럼 이상으로 비 내리는 효과 및 빗방울 맺히는 효과 html/css 소스에 대한 소개를 마칩니다