Create Parallax Website Using HTML CSS and Parallax.js

Bootstrap Templates | December 2, 2020

Today we create Parallax Website using HTML CSS and ParallaxJS. This tutorial blog can help you to learn how to create Website with Parallax Effect.

Video Tutorial for Create Parallax Website Using HTML CSS and Parallax.js

Today we create Parallax Website using HTML CSS and ParallaxJS. This video can help you to learn how to create Website with Parallax Effect.

Create Parallax Website [Source Code]

This source code can help you to create Parallax website using ParallaxJS . You can use your own images for this project.

Bootstrap CSS 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">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
</head>
<body>

<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_menu" id="main_menu">
	<span class="menu_bg"></span>
	<ul>
		<li><a href="#section1">Home</a></li>
		<li><a href="#section2">About Us</a></li>
		<li><a href="#section3">Services</a></li>
		<li><a href="#section4">Contact Us</a></li>
	</ul>
</div>

<div class="block-row banner" id="section1" data-parallax="scroll" data-image-src="images/bg1.jpg">
	<div class="container">
		<h1>Parallax</h1>
		<p>Website</p>
	</div>
</div>
<div class="block-row about" id="section2"  data-parallax="scroll" data-image-src="images/bg2.jpg">
	<div class="container">
		<div class="row">
			<div class="col-md-7">
				<div class="about_box">
					<h2>About Us</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. Duis aute irure dolor in reprehenderit 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.</p>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="block-row services" id="section3"  data-parallax="scroll" data-image-src="images/bg3.jpg">
	<div class="container">
		<h2>Services</h2>
		<div class="row">
			<div class="col-md-6">
				<div class="service_box clearfix">
					<figure>
						<img src="images/bg1.jpg" alt="">
					</figure>
					<div class="description">
						<h3>Lorem ipsum dolor</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="service_box clearfix">
					<figure>
						<img src="images/bg2.jpg" alt="">
					</figure>
					<div class="description">
						<h3>Lorem ipsum dolor</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="service_box clearfix">
					<figure>
						<img src="images/bg3.jpg" alt="">
					</figure>
					<div class="description">
						<h3>Lorem ipsum dolor</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="service_box clearfix">
					<figure>
						<img src="images/bg4.jpg" alt="">
					</figure>
					<div class="description">
						<h3>Lorem ipsum dolor</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="block-row contact" id="section4"  data-parallax="scroll" data-image-src="images/bg4.jpg">
	<div class="container text-center">
		<h2>Contact Us</h2>
		<div class="container_box">
			<form>
				<div class="row">
					<div class="col-md-6">
						<input type="text" name="" placeholder="First Name">
					</div>
					<div class="col-md-6">
						<input type="text" name="" placeholder="Last Name">
					</div>
					<div class="col-md-6">
						<input type="text" name="" placeholder="Email">
					</div>
					<div class="col-md-6">
						<input type="text" name="" placeholder="Phone">
					</div>
					<div class="col-md-12">
						<input type="text" name="" placeholder="Subject">
					</div>
					<div class="col-md-12">
						<textarea placeholder="Message">
					</div>
					<div class="col-md-12 text-center">
						<input type="submit" value="Submit">
					</div>
				</div>
			</form>
		</div>
	</div>
</div>			
<footer class="footer">
	© parallax.com
</footer>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.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;
}
html,body{
	scroll-behavior: smooth;
}
img{
	max-width: 100%;
}
h2{
	margin-bottom: 30px;
}
/*header*/
.header{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 1000;
	padding: 20px 30px;
	background:rgba(7,75,75,0.8);
}
.block-row{
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: 30px 10px;
	justify-content: center;
	background-position: center center;
	/*background-size: cover;*/
}
.nav_icon{
	color: #fff;
	font-size: 35px;
	vertical-align: middle;
	line-height: 1
}

.main_menu{
	position: fixed;
	right: 0;
	top:-10px;
	padding-top: 82px;
	z-index: 10;
	overflow: hidden;
	height: 0;
	width: 250px;
	transition: all 0.3s ease-in-out;
}
.main_menu.active{
	height: 100vh;
}
.main_menu ul{
	margin:0;
	padding: 0;
	list-style: none;
	position: relative;
	z-index: 1;
}
.main_menu ul li a{
	display: block;
	text-decoration: none;
	padding: 10px;
	font-size: 25px;
	border-bottom: 1px solid rgba(7,75,75,0.8);
	color: #000;
	background: #fff;
}
.main_menu ul li a:hover{
	background: rgba(7,75,75,0.8);
	color: #fff;
}
.menu_bg{
	background: #fff;
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	top:0;
	left: 50%;
	margin-left: -5px;
	transition: all 0.3s ease-in-out;
}
.main_menu.active .menu_bg{
	transform: scale(120);
}

/*banner*/
.banner{
	text-align: center;
  color: #fff;
  font-size: 60px;

}
.banner h1{
	font-size: 120px;
  text-transform: uppercase;
  font-weight: 700;
}
/*about*/
.about_box{
	background:#fff;
	border-radius: 15px;
	padding: 50px;
}

/*services*/
.services{
	background-blend-mode: darken;
	background-color:rgba(7,75,75,0.5)
}
.services h2{
	text-align: center;
	font-size: 40px;
	color: #fff;
}
.service_box{
	min-height: calc(100% - 40px);
	margin-bottom: 40px;
	padding: 20px;
	background:#fff;
	border-radius: 10px;
}
.service_box figure{
	width: 40%;
	float: left;
	margin:0 20px 0 0;
}
.service_box figure img{
	border-radius: 5px;
}
.service_box .description{
	overflow: hidden;
	color: #000;
}
.service_box .description p{
	margin-bottom: 0;
}

/*contact*/
.contact h2{
	font-size: 40px;
}
.container_box{
	max-width: 800px;
	margin: 0 auto;
	padding: 30px;
	background:rgba(7,75,75,0.5);
	border-radius: 15px;
}
.container_box input:not([type="submit"]),
.container_box textarea{
	width: 100%;
	height: 40px;
	resize: none;
	margin-bottom: 15px;
	padding:5px 15px;
	border-radius: 5px;
	border:1px solid rgba(7,75,75,1);
}
.container_box textarea{
	height: 100px;
}
.container_box input[type="submit"]{
	width: 150px;
	background:rgba(7,75,75,1);
	border:0;
	color: #fff;
	height: 40px;
	text-align: center;
	border-radius: 5px;
}

/*footer*/
.footer{
	padding: 15px 0;
	text-align: center;
	color: #fff;
	background:#062323;
}


/*This Media Query use for Mobile View*/
@media screen and (max-width: 767px){
	.header{ padding: 15px 0; }
	.logo{ width: 100px; display: block; }
	.banner{ padding-top: 80px; }
  .banner h1{ font-size: 50px; }	
  .about_box{
  	padding: 25px;
  }
  .service_box figure{ float: none; width: auto; margin:0 0 20px; }

}

JavaScript Code

Copy

$(document).ready(function(){
  $('.block-row').parallax();


})

nav_icon = document.getElementById('nav_icon');
  main_menu = document.getElementById('main_menu');
  menuList = document.querySelectorAll('.main_menu ul li a');
  current = 1 
  nav_icon.addEventListener('click',function(){
    if(current == 1){
      main_menu.classList.add("active");
      current = 2
    }else if(current == 2){
      main_menu.classList.remove("active");
      current = 1
    }   
  });
  menuList.forEach(function(navElement) {
    navElement.addEventListener('click',function(){
      if(current == 2){
        main_menu.classList.remove("active");
        current = 1
      }
    });
  });

Create Parallax Website Using HTML CSS and Parallax.js

Video Tutorial for Create Parallax Website Using HTML CSS and Parallax.js

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Build a Stop-Watch Web App Using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery