What we need for this tutorial:
- HTML and CSS
- JQuery and Bootstrap
- AnimeJS
- and your choice of editor
I downloaded all the assets and placed them in my assets directory so my directory will look like this:
- animations/assets/css/css-files-here
- animations/assets/js/js-files-here
Then I created index.html file and styles.css in my assets folder and then linked all css in header tag and linked all js files below the body.
So my index.html is looking like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home - Programmer101N</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
</body>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/anime.js"></script>
</html>
Now let’s dive into creating our bubble in html and css, So first let me create a div with class of bubble-container this will contain our bubble and background image.
<body>
<div class="bubble-container">
</div>
</body>
Now let’s create our background image. I’m going to create another div inside bubble-container and give it class of img-container and add img element inside with our backgorund image.
<div>
<div class="img-container">
<img src="https://th.bing.com/th/id/Rcb3ea77bc303d8e379aca0c0916cafac?rik=Y6DYZIYKjjA3ag&riu=http%3a%2f%2fgetwallpapers.com%2fwallpaper%2ffull%2fa%2f9%2f2%2f29702.jpg&ehk=XzBkKN86zXbM%2fLyfdNITGljJEUEH%2blam0UL%2btdeZRA8%3d&risl=&pid=ImgRaw" alt="" />
</div>
</div>
Now let’s create our bubbles. I’m going to create 4 bubble you can create much as you like. To do this, Create div with class of bubble inside bubble-container.
<div class="bubble-container">
<div class="img-container">
<img src="https://th.bing.com/th/id/Rcb3ea77bc303d8e379aca0c0916cafac?rik=Y6DYZIYKjjA3ag&riu=http%3a%2f%2fgetwallpapers.com%2fwallpaper%2ffull%2fa%2f9%2f2%2f29702.jpg&ehk=XzBkKN86zXbM%2fLyfdNITGljJEUEH%2blam0UL%2btdeZRA8%3d&risl=&pid=ImgRaw" alt="" />
</div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
</div>
Now we are done with HTML part, Now let’s style it. Open styles.css and copy these.
html, body{
margin: 0;
padding: 0;
overflow: hidden;
}
.bubble-container{
width: 100%;
height: 100vh;
}
.img-container{
height: 100vh;
background: black;
}
.bubble{
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: 0 0 25px rgb(255, 255, 255) inset, 0 0 50px rgb(224, 224, 224);
backdrop-filter: blur(10px);
}
We are giving bubble position absolute because we need to position it accordingly and backdrop-filter so we can filter image when bubble comes on top.
We’re done with CSS part. Now let’s write some script. Open script tag at bottom and type.
setInterval(() => {}, 7000);
setInterval is built-in function which calls given function every defined milliseconds. Inside the function body, Create AnimeJs script.
setInterval(() => {
anime({
targets: ".bubble",
left: (p) => `${anime.random(0, 100)}%`,
top: ["120%", "-50%"],
duration: 5000,
delay: anime.stagger(500),
easing: "linear",
});
}, 7000);
NOTICE: Some Browsers doesn’t support backdrop-filter, So you can choose another browser.
We’re done with our animation.
You can download this source code from my Github.
