This is background demo design of webpage. In this deso we are giving you Particles Background of website with bootstra 4. also this design call science background. you can use this background in landing page. this is best background animation of web page.

We allows to free snippets of use particles.js as background , you can download full code of js particle effects layout. Here in this post i will give you example of particle js as background snippet and you will get simple code of html, css and jquery. In particle js tutorial snippet i give you three tab with html, css and js, you can easily get code of particles.js react layout.


<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="row-fluid main-section text-center"> <div class="col-lg-12"> <div id="particles-js"> <div class="banner-text"> <div class="row-fluid"> <div class="col-lg-8 offset-lg-2"> <h1>Particles js Banner</h1> <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt uprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h5> </div> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> </body> </html>
.main-section{ background: linear-gradient(to right, #005B9A ,#74C2E1); position: relative; } .banner-text{ color:#fff; position: absolute; top: 50%; transform: translateY(-50%); }
particlesJS("particles-js", { "particles": { "number": { "value": 88, "density": { "enable": true, "value_area": 700 } }, "color": { "value": ["#aa73ff", "#f8c210", "#83d238", "#33b1f8"] }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 15 } }, "opacity": { "value": 0.5, "random": false, "anim": { "enable": false, "speed": 1.5, "opacity_min": 0.15, "sync": false } }, "size": { "value": 2.5, "random": false, "anim": { "enable": true, "speed": 2, "size_min": 0.15, "sync": false } }, "line_linked": { "enable": true, "distance": 110, "color": "#33b1f8", "opacity": 0.25, "width": 1 }, "move": { "enable": true, "speed": 1.6, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": false, "mode": "repulse" }, "onclick": { "enable": false, "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, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true });

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post


Random Blog