Skip to content

I have created an animation of Rain Drops by using CSS and HTML #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kalaSriSaiRaksha wants to merge 5 commits into
base: main
Choose a base branch
from
Open

I have created an animation of Rain Drops by using CSS and HTML #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
76b818c
Create index.html
kalaSriSaiRaksha Oct 9, 2022
c2fac85
Create main.css
kalaSriSaiRaksha Oct 9, 2022
b3c0127
Create index.html
kalaSriSaiRaksha Oct 9, 2022
03a0f86
Create main.css
kalaSriSaiRaksha Oct 9, 2022
4614406
Create main.js
kalaSriSaiRaksha Oct 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions CSS Rain effect over the camera/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<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>
166 changes: 166 additions & 0 deletions CSS Rain effect over the camera/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
html {
height: 100%;
}

body {
height: 100%;
margin: 0;
overflow: hidden;
background: linear-gradient(to bottom, #202020, #111119);
}

.rain {
position: absolute;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}

.rain.back-row {
display: none;
z-index: 1;
bottom: 60px;
opacity: 0.5;
}

body.back-row-toggle .rain.back-row {
display: block;
}

.drop {
position: absolute;
bottom: 100%;
width: 15px;
height: 120px;
pointer-events: none;
animation: drop 0.5s linear infinite;
}

@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 {
width: 15px;
height: 10px;
border-top: 2px dotted rgba(255, 255, 255, 0.5);
border-radius: 50%;
opacity: 1;
transform: scale(0);
animation: splat 0.5s linear infinite;
display: none;
}

body.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);
}
}

.toggles {
position: absolute;
top: 0;
left: 0;
z-index: 3;
}

.toggle {
position: absolute;
left: 20px;
width: 50px;
height: 50px;
line-height: 51px;
box-sizing: border-box;
text-align: center;
font-family: sans-serif;
font-size: 10px;
font-weight: bold;
background-color: rgba(255, 255, 255, 0.2);
color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s;
}

.toggle:hover {
background-color: rgba(255, 255, 255, 0.25);
}

.toggle:active {
background-color: rgba(255, 255, 255, 0.3);
}

.toggle.active {
background-color: rgba(255, 255, 255, 0.4);
}

.splat-toggle {
top: 20px;
}

.back-row-toggle {
top: 90px;
line-height: 12px;
padding-top: 14px;
}

.single-toggle {
top: 160px;
}

body.single-toggle .drop {
display: none;
}

body.single-toggle .drop:nth-child(10) {
display: block;
}
44 changes: 44 additions & 0 deletions CSS Rain effect over the camera/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
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);
$('.rain.back-row').append(backDrops);
}

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

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

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

makeItRain();
16 changes: 16 additions & 0 deletions CodePen Home CSS Raindrops (Animated)/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<html>
<head>
<title>Raindrops</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

</head>
<body>
<div class="rd-container">
<div class="rd-window"></div>
<div class="raindrops">
<script>for(var i=0; i<100; i++){ document.write('<div class="raindrop"></div>'); }</script>
</div>
</div>
</body>
</html>
Loading