DEV Community

Cover image for How to build water website with flying bubbles
AWCode0X
AWCode0X

Posted on • Updated on

How to build water website with flying bubbles

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

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>

Enter fullscreen mode Exit fullscreen mode

now, we will link CSS file with html file in


<link rel="stylesheet" href="style.css">
Enter fullscreen mode Exit fullscreen mode

we will use this image for background :

Image description

In CSS file :

  • First remove basic style
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
Enter fullscreen mode Exit fullscreen mode
  • edit body and add background image for it
body {
    background-image: url(./background.png);
    background-size: cover;
    background-position: center;
    height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

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:

Image description

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

Top comments (1)

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

That's beautiful! 🙂

Tip: You can embed a codepen with the working project so we can experience the animations 😁

Best regards