그누보드 QA - 갠홈 CSS 비내리는 효과

css 디폴트 적용하시구. 스크립트는 sub에 적용하시구
//상단
<body class="back-row-toggle splat-toggle">
<div class="rain front-row"></div>
<div class="rain back-row"></div>
<div class="toggles">
//중간
<div class="splat-toggle toggle active">SPLAT</div>
<div class="back-row-toggle toggle active">BACK<br>ROW</div>
<div class="single-toggle toggle">SINGLE</div>
// 하단
</div>
</body>

↳ 웅프 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023-11-09 15:10:18114.♡.♡.193

자세한건 강시님 홈 소스를 봐야 하겟죠?---;;

↳ 강시윤 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023-11-09 15:12:22121.♡.♡.75

감사합니다! 일단 열심히 해보겠습니다..>.<!!!

↳ 웅프 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023-11-09 17:28:06114.♡.♡.193

https://www.haenong.kr/ 이걸 원하시나요?

↳ 강시윤 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023-11-09 20:40:58121.♡.♡.75

아 네네 너무 늦게 확인해서 죄송해요 ㅠㅠ!!

↳ 웅프 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023-11-09 21:00:02114.♡.♡.193

/* css 상단 html & body 아래 에다 정의 하시고 */
.rain {
position: absolute;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}

.rain.back-row {
display: none;
z-index: 0; /* 변경된 부분 */
bottom: 60px;
opacity: 0.5;
}
.back-row-toggle .rain.back-row {
display: block;
}

.drop {
position:fixed;
bottom: 0%;
width: 10px;
height: 120px;
pointer-events: none;
animation: drop 0.5s linear infinite;
z-index: -1000;
}
.parent {
position: relative;
}

.element {
position: absolute;
z-index: -1;
}
@keyframes drop {
0% {
transform: translateY(0vh);
}
75% {
transform: translateY(90vh);
}
100% {
transform: translateY(90vh);
}
}

.stem {
width: 1px;
height: 60%;
margin-left: 7px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
animation: stem 0.5s linear infinite;
}

@keyframes stem {
0% {
opacity: 1;
}
65% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}

.splat-toggle .splat {
display: block;
}

@keyframes splat {
0% {
opacity: 1;
transform: scale(0);
}
80% {
opacity: 1;
transform: scale(0);
}
90% {
opacity: 0.5;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.5);
}
}

↳ 웅프 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023-11-09 21:00:58114.♡.♡.193

// 헤더 서브 파일 안에 <head> </head> 안에 정의하시면됩니다. 아니면 푸터파일 제일 하단 기존 스크립트 정의 된곳

<script>
$(function() {
// 폰트 리사이즈 쿠키있으면 실행
font_resize("container", get_cookie("ck_font_resize_rmv_class"), get_cookie("ck_font_resize_add_class"));
});
</script>
<script>
var makeItRain = function() {
//clear out everything
$('.rain').empty();

var increment = 0;
var drops = "";
var backDrops = "";

while (increment < 100) {
//couple random numbers to use for various randomizations
//random number between 98 and 1
var randoHundo = (Math.floor(Math.random() * (98 - 1 + 1) + 1));
//random number between 5 and 2
var randoFiver = (Math.floor(Math.random() * (5 - 2 + 1) + 2));
//increment
increment += randoFiver;
//add in a new raindrop with various randomizations to certain CSS properties
drops += '<div class="drop" style="left: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
backDrops += '<div class="drop" style="right: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
}

$('.rain.front-row').append(drops);

}

$('.splat-toggle.toggle').on('click', function() {
$('body').toggleClass('splat-toggle');
$('.splat-toggle.toggle').toggleClass('active');
makeItRain();
});

makeItRain();
</script>