Make a website with Particle JS | How to use Particles.js in Website

HTML Templates | December 2, 2020

This is a Particles.js tutorial blog for learn how to use Particles.js on your website.

Video Tutorial for "Make a website with Particle JS"

This is a Particles.js tutorial video for learn how to use Particles.js on your website.

Make a website with Particle JS [Source Code]

This source code can help you to create website with particle.js effect. You can use your own images for this project.

Bootstrap CSS Source

Particle JS Source

jQuery library Source

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="particles-js"></div>
<header class="header">
	<div class="container-fluid">
		<div class="row d-flex align-items-center">
			<div class="col-auto">
				<a href="#" class="logo"><img src="images/logo.png" alt="logo"></a>
			</div>
			<div class="col text-right">
				<a class="nav_icon" id="nav_icon" href="#!">
					<i class="fa fa-bars"></i>
				</a>
			</div>
		</div>
	</div>
</header>	

<div class="main_container">
	<div class="block-row d-flex align-items-center" style="background-image: url(images/bg1.jpg); ">
		<div class="container">
			<div class="row">
				<div class="col-md-7">
					<h2>Particles JS <br> Website</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
					consequat.</p>
				</div>
			</div>
		</div>	
	</div>
</div>

<div class="border_left"></div>
<div class="border_bottom"></div>
			
<footer class="footer">
	<ul class="social_links">
		<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
		<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
		<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
		<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
	</ul>
</footer>
<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>

CSS Code

Copy

*,*::before,*::after {
  box-sizing: border-box;
}
body{
	margin: 0;
	font-family: arial;
	background:#fff;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	color: #333;
	
}
img{
	max-width: 100%;
}

/*header*/
.header{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 1000;
	padding:15px 5px;
	background:#b61924;
}
.logo img{
	width: 140px;
}
.nav_icon{
	font-size: 40px;
	color: #fff;
	line-height: 1;
}


.main_container{
	height: 100vh;
	overflow: auto;
}
.block-row{
	min-height: 100vh;
	background-size: cover;
	background-position: center center;
	background-blend-mode: darken;
	background-color: rgba(48,64,166,0.8);
	font-size: 20px;
	color: #fff;
}
.block-row h2{
	font-size: 90px;
	font-weight: 700;
}

.border_left{
	background: #b61924;
	position: fixed;
	left: 0;
	top: 0;
	width: 15px;
	height: 100vh;
	z-index: 1000;
}
.border_bottom{
	background: #b61924;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 15px;
	z-index: 1000;
}

.footer{
	padding: 7px 0;
	text-align: center;
	color: #fff;
	background:#b61924;
	position: fixed;
	right: 0;
	bottom: 0;
	height: 100vh;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
}
.social_links{
	text-align: center;
	padding: 0;
	margin: 0;
	list-style: none;
}
.social_links li{
	margin:10px 20px;
	font-size: 24px;
}
.social_links li a i{
	color: #fff;
	transition: all 0.3s ease-out;
}
.social_links li a:hover i.fa-facebook{
	color: #3b5998 
}
.social_links li a:hover i.fa-twitter{
	color: #00acee 
}
.social_links li a:hover i.fa-linkedin{
	color: #0e76a8;
}
.social_links li a:hover i.fa-instagram{
	color: #3f729b 
}

#particles-js{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}

JavaScript Code

Copy

particlesJS('particles-js',
  
  {
    "particles": {
      "number": {
        "value": 80,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": "#ffffff"
      },
      "shape": {
        "type": "circle",
        "stroke": {
          "width": 0,
          "color": "#000000"
        },
        "polygon": {
          "nb_sides": 5
        },
        "image": {
          "src": "images/logo.jpg",
          "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": true,
        "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": true,
          "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"
    }
  }

);

Make a website with Particle JS | How to use Particles.js in Website

Video Tutorial for "Make a website with Particle JS"

Make a website with Particle JS [Source Code]

Build a Stop-Watch Web App Using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

Best way to create animated loaders using CSS