갠홈 CSS 비내리는 효과

강시윤

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2023-11-09 (목) 14:46:52 4,994

안녕하세요!

https://codepen.io/arickle/pen/XKjMZY 해당 링크의 효과를 아보카도 퍼스널 갠홈에서 사용하고 싶은데

너무나도 초심자라서.. 막막합니다 일단 다운을 받고 public_html에 파일을 모두 업로드 해두었습니다..!!

그누보드5 css

답변 2개 / 댓글 10개

채택된 답변

+20 포인트

퇴사는지능순

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2023-11-09 (목) 14:51:10

네 그대로 적용하시면됩니다.

답변에 대한 댓글 10개

강시윤

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2023-11-09 (목) 14:57:06

제가 완전 초심자라 적용하는 법을 잘 모르겠어서... ㅠㅠ
업로드까진 했는데 적용하는 방법을 잘 모르겠어요..

웅프

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2023-11-09 (목) 15:08:13

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:18

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

강시윤

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2023-11-09 (목) 15:12:22

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

웅프

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2023-11-09 (목) 17:28:06

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

강시윤

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2023-11-09 (목) 20:40:58

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

웅프

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2023-11-09 (목) 21:00:02

/* 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:58

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

<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>

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

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>