How to build water website with flying bubbles
Tags: javascript, webdev, tutorial, css
Published: 2022-08-30 17:28:59

Hello guys, today's tutorial is about water website.

First Thing We will create :
  1- index.html
  2- style.css
  3- script.js



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iioq8c6zso6nfbuwuaiu.png)



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



```
<link rel="stylesheet" href="style.css">
```


we will use this image for background :


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/969yz1hblrgdiy0jlmm3.png)


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 <div> 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](https://fonts.google.com/specimen/Bebas+Neue?preview.text=under%20Water&preview.text_type=custom)


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pax2kn8jc0qrp2yx2mbm.png)


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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zfqo04xn9i588ikh0pua.png)