Particle Js Example
it is state foreword example we just need to changes in .html , .css And Very Importantly .Json File
1.html file(Index.html file):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Particles Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="particles-js">
</div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
particlesJS.load('particles-js', 'particles.json', function(){
console.log('particles.json loaded...');
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Particles Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="particles-js">
</div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
particlesJS.load('particles-js', 'particles.json', function(){
console.log('particles.json loaded...');
});
</script>
</body>
</html>
2. CSS file:(style.css)
body{
margin:0;
font: normal 16px Arial, Helvetica, sand-serif;
color:#333;
}
#particles-js{
background:firebrick;
height:400px;
}
3 . Most Important json file, in this file contaion all property like on move, onclick , links and may more.
margin:0;
font: normal 16px Arial, Helvetica, sand-serif;
color:#333;
}
#particles-js{
background:firebrick;
height:400px;
}
3 . Most Important json file, in this file contaion all property like on move, onclick , links and may more.
JSon file(particles.json):
{
"particles":{
"number":{
"value":400
},
"color":{
"value":"#fff"
},
"shape":{
"type":"circle",
"stroke":{
"width":1,
"color":"#ccc"
},
"image":{
"src":"http://www.iconsdb.com/icons/preview/white/contacts-xxl.png"
}
},
"opacity":{
"value":0.5,
"random":true,
"anim":{
"enable":false,
"speed":1
}
},
"size":{
"value": 5,
"random":false,
"anim":{
"enable": false,
"speed":30
}
},
"line_linked":{
"enable": true,
"distance": 120,
"color":"#fff",
"width":1
},
"move":{
"enable":true,
"speed":2,
"direction":"none",
"straight":false
}
},
"interactivity":{
"events":{
"onhover":{
"enable":true,
"mode":"repulse"
},
"onclick":{
"enable": true,
"mode":"push"
}
},
"modes":{
"repulse":{
"distance":50,
"duration":0.4
},
"bubble":{
"distance":100,
"size":10
}
}
}
}
"particles":{
"number":{
"value":400
},
"color":{
"value":"#fff"
},
"shape":{
"type":"circle",
"stroke":{
"width":1,
"color":"#ccc"
},
"image":{
"src":"http://www.iconsdb.com/icons/preview/white/contacts-xxl.png"
}
},
"opacity":{
"value":0.5,
"random":true,
"anim":{
"enable":false,
"speed":1
}
},
"size":{
"value": 5,
"random":false,
"anim":{
"enable": false,
"speed":30
}
},
"line_linked":{
"enable": true,
"distance": 120,
"color":"#fff",
"width":1
},
"move":{
"enable":true,
"speed":2,
"direction":"none",
"straight":false
}
},
"interactivity":{
"events":{
"onhover":{
"enable":true,
"mode":"repulse"
},
"onclick":{
"enable": true,
"mode":"push"
}
},
"modes":{
"repulse":{
"distance":50,
"duration":0.4
},
"bubble":{
"distance":100,
"size":10
}
}
}
}
Comments
Post a Comment