Multi Color Animated Shapes: In this lesson we will know how to create multi animated shapes such as circle, rectangle, start, polygon and triangle. We will use Particles.js library to help us create those particles.
This Post will follow the following:
- Download and extract Particles.js library.
- Create the custom HTML and style code.
- Link the files that we will need.
- Add our custom code.
Lesson 07
This is a YouTube Video for More about Animated Shapes:
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 you will need to copy the app.js file in the same package at this path /demo/js/app.js.
Create the custom HTML and style code:
Here we will create an html file and add our code to that file, the following code is the content of the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
padding: 0;
margin: 0;
overflow: hidden;
}
#ShapeID{
background: linear-gradient(to top , #9e1068,#ff5ec5);
}
</style>
</head>
<body>
<div id="ShapeID"></div>
<script src="particles.js"></script>
<script src="app.js"></script>
</body>
</html>
Link the files that we will need:
Actually the previous code is containing the linking code too. The linking code is like the following ensure from the path and the name:
<script src="particles.js"></script>
<script src="app.js"></script>
And this is the ID that we will need:
<div id="ShapeID"></div>
Add our custom code:
As a final step we will modify the app.js file to match our desired code, as the following:
particlesJS('ShapeID',
{
"particles": {
"number": {
"value": 100,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": ['#19f21a','#ffdf0e','#044cff','#17c9ba','#fdffff','#ff4444']
},
"shape": {
"type": ['circle','edge','triangle','polygon','star'],
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.8,
"random": false,
"anim": {
"enable": false,
"speed": 5,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 17,
"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": 6,
"direction": "none",
"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"
}
}
);
The most important part in the previous code is the color and shapes, here is the code:
"color": {
"value": ['#19f21a','#ffdf0e','#044cff','#17c9ba','#fdffff','#ff4444']
},
"shape": {
"type": ['circle','edge','triangle','polygon','star'],
"stroke": {
"width": 0,
"color": "#000000"
},
In that code we added an array for the color and the shapes, so that the browser will select a random color and shapes the color array is “value”: [‘#19f21a’,’#ffdf0e’,’#044cff’,’#17c9ba’,’#fdffff’,’#ff4444′] with hex value. And the shapes array is “type”: [‘circle’,’edge’,’triangle’,’polygon’,’star’], so it contain five type of shapes that will appear in the web page.
The other code we have explained them in previous lessons at particles.js tag just clikc at particles.js tag at the bottom and you will find the full lessons.
Your Could Download the code from this button:
Website URL:
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
Instagram: https://www.instagram.com/safhatech
Facebook: http:// https://www.facebook.com/Safhatech-487171875443687
Phone:967778283416
Pingback: How to create a Happy New Year Landing Page as a Background? | Web Design - SafhaTech