How to build water website with flying bubbles

#javascript #webdev #tutorial #css

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: