Hello guys, today's tutorial is about water website.
First Thing We will create :
1- index.html
2- style.css
3- script.js
In HTML file:
we will create basic structure. if you in VS Code choose from vs code suggestions "html:5" or "!" to do that:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
now, we will link CSS file with html file in
<link rel="stylesheet" href="style.css">
we will use this image for background :
In CSS file :
- First remove basic style
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
- edit body and add background image for it
body {
background-image: url(./background.png);
background-size: cover;
background-position: center;
height: 100vh;
}
In HTML File we will add
we will give for him "container" class, and add into it h1 into it we will add "Under Water" and we will edit CSS of that<div class="container">
<h1>Under Water</h1>
</div>
before starting editing container's CSS we need to add font
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
In CSS File:
- first we want to center ".container" and make padding from left
.container {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding-left: 20px;
}
then. we need to edit h1 CSS
.container h1 {
color: white;
font-family: 'Bebas Neue', cursive;
letter-spacing: 3px;
font-size: 48px;
}
for now the result is:
Then we will create bubbles:
for HTML :
we will add that:
<div class="bubbles"></div>
for the CSS we will edit ".bubble" and make the animation
.bubbles .bubble {
position: absolute;
width: 150px;
height: 150px;
border-radius: 46% 54% 40% 60% / 46% 41% 59% 54% ;
box-shadow: 0 0 10px white inset;
transform: translateY(-100%);
animation-name: getDown;
animation-iteration-count: infinite;
}
@keyframes getDown {
0%{
transform: translateY(-100%);
} 100% {
transform: translateY( calc(100vh + 100%) );
}
}
for Javascript :
First we need to link javascript with HTML:
<script src="./script.js"></script>
then (In Javascript file) we will get ".bubble" in variable
let bubbles = document.querySelector('.bubbles')
then we need for loop to make all bubbles we need. we will create a random number for position X, animation daley and duration. finally
for (let i = 0; i < 30; i++) {
let bubble = document.createElement('div')
let posX = Math.random() * 100
let daley = Math.random() * -10
let duration = (Math.random() * 10) + 3
bubble.className = 'bubble'
bubble.style.left = posX + '%'
bubble.style.animationDelay = daley + 's'
bubble.style.animationDuration = duration + 's'
bubbles.appendChild(bubble)
}
the Result:
Top comments (1)
That's beautiful! 🙂
Tip: You can embed a codepen with the working project so we can experience the animations 😁
Best regards