웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] CSS RAIN 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] CSS RAIN

해피CGI윤실장 2023. 10. 17. 09:29

 





비가 내리는 효과를 만들 수 있습니다.

코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다.




[HTML 소스]
<section class="rain"></section>

[CSS 소스]

html{height:100%;}
body {
background:#0D343A;
background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(#000000)  );
background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(0,0,0,1) 100%);
 
overflow:hidden;}
 
 
.drop {
  background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6))  );
  background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
width:1px;
height:89px;
position: absolute;
bottom:200px;
-webkit-animation: fall .63s linear infinite;
  -moz-animation: fall .63s linear infinite;
  
}
 
/* animate the drops*/
@-webkit-keyframes fall {
to {margin-top:900px;}
}
@-moz-keyframes fall {
to {margin-top:900px;}
}
 


[JS 소스]

// number of drops created.
var nbDrop = 858; 
 
// function to generate a random number range.
function randRange( minNum, maxNum) {
  return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}
 
// function to generate drops
function createRain() {
 
for( i=1;i<nbDrop;i++) {
var dropLeft = randRange(0,1600);
var dropTop = randRange(-1000,1400);
 
$('.rain').append('<div class="drop" id="drop'+i+'"></div>');
$('#drop'+i).css('left',dropLeft);
$('#drop'+i).css('top',dropTop);
}
 
}
// Make it rain
createRain();

 

 

 

저작자표시

'웹프로그램밍 자료실 > JAVA 자료' 카테고리의 다른 글

[해피CGI][cgimall] jQuery 기반 URL 파서(Parser) - ddUrl  (0) 2023.10.27
[해피CGI][cgimall] Animated Calendar Plugin With Event Management - GC-Calendar  (0) 2023.10.20
[해피CGI][cgimall] Play Youtube Videos In A Responsive Modal - jQuery YT Player  (0) 2023.09.26
[해피CGI][cgimall] Basic Responsive Table Plugin For jQuery - Basic Table  (0) 2023.09.19
[해피CGI][cgimall] Arctext.js CSS3 및 jQuery를 사용하여 텍스트 곡선 만들기  (0) 2023.09.18
공유하기 링크
'웹프로그램밍 자료실/JAVA 자료' Related Articles more
Comments