Under Water Scene: In this lesson we will explain how to create the under water scene for website. This Under water Scene will be used as a landing page in your website, we will use Particles.js library to facilitate our work. Particles.js is a JavaScript based library that deals with particles in web design.
This Lesson will be like the following:
- Download and extract Particles.js library.
- Download the underwater scene objects
- Create the custom HTML and the style.
- Add our custom code to the app.js file.
Lesson 06
Here is a YouTube Video for more about Under Water Scene Design:
Download and extract Particles.js library:
First of all we need to download Particles.js library from the following link https://github.com/VincentGarreau/particles.js.git. After downloading this package we will need to extract it and copy the “particles.js” file into our coding place. Also we will need to copy the app.js file in the same package at this path /demo/js/app.js.
Download the underwater scene objects:
After that we will need to get the images of the fishes and the diver as we explained in the video. To download these images here is the link:Fish images , Under water, and the Diver image download those images and then cut the element you want with photoshop program or any program you have till you get the following shapes:
We will download them and prepare them for coding usage.
Create the custom HTML and the style:
Now we will create the HTML file and add the linking javascript code, the Style we need, and the ID of the area work.
The HTML code will be as the following:
The style code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body{
padding: 0;
margin: 0;
}
#UnderWaterID{
background: linear-gradient(to top ,#2305c7, #00c4ff);
background-size: 100% 100%;
}
.img{
position: absolute;
}
.img1{
top:30%;
height: 50px;
animation: animate 20s linear infinite;
}.img2{
top:50%;
height: 60px;
animation: animate1 23s linear infinite;
}.img3{
top:20%;
height: 30px;
animation: animate1 40s linear infinite;
}.img4{
top:60%;
height: 60px;
animation: animate 30s linear infinite;
}
.img5{
top:70%;
height: 100px;
animation: animate 25s linear infinite;
}
@keyframes animate {
0%{
transform: translateY(-50px);
left:-20%;
}
25%{
transform: translateY(20px);
}
50%{
transform: translateY(-20px);
}
100%{
transform: translateY(50px);
left:100%;
}
}
@keyframes animate1 {
0%{
transform: translateY(-50px);
left:100%;
}
25%{
transform: translateY(20px);
}
50%{
transform: translateY(-20px);
}
100%{
transform: translateY(50px);
left:-20%;
}
}
</style>
The body code:
<body>
<div id="UnderWaterID">
<img src="img1.png" class="img img1">
<img src="img2.png" class="img img2">
<img src="img3.png" class="img img3">
<img src="img4.png" class="img img4">
<img src="diver.png" class="img img5">
</div>
<script src="particles.js"></script>
<script src="app.js"></script>
</body>
</html>Add our custom code to the app.js file:
Here is the app.js file content we will not explain it because it only adds the bubbles and we have created the bubbles in the previous lesson this is the link: https://safhatech.com/index.php/2019/10/28/how-to-create-colored-bubbles-as-web-page-background-web-animation/.
Here is the app.js file code after our modifications:
/* -----------------------------------------------
/* How to use? : Check the GitHub README
/* ----------------------------------------------- */
/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
/*
particlesJS.load('particles-js', 'particles.json', function() {
console.log('particles.js loaded - callback');
});
*/
/* Otherwise just put the config content (json): */
particlesJS('UnderWaterID',
{
"particles": {
"number": {
"value": 30,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 5,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 2,
"direction": "top",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}
);Your Could Download the code from this button:
Consequently You could follow us at :
Website URL: https://www.safhatech.com/
Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw
Twitter: http:// https://twitter.com/safhatech
Instegram: https://www.instagram.com/safhatech
Facebook: http:// https://www.facebook.com/Safhatech-487171875443687
Phone:967778283416
