Parallax Webpage Design using HTML and CSS
In this tutorial, we are going to design a webpage with parallax effect using HTML and CSS.
Source Code :
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Design Parallax Scrolling Webpage using HTML and CSS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<header class="main-header position-fixed wow animate__animated animate__fadeInDown animate__delay-3s animate__slow 2s">
<div class="container-fluid">
<div class="row justify-content-between">
<div class="col-2">
<div class="logo">
<h1>
<a href="">
<img src="images/logo.png">
</a>
</h1>
</div>
</div>
<div class="col-10">
<div class="top-social h-100 d-flex justify-content-end align-items-center">
<span class="share-txt text-white">
Share
</span>
<ul class="social-icons d-flex ml-3">
<li>
<a href="#">
<i class="fab fa-facebook-square"></i>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-twitter-square"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<section class="banner fullscreen parallax-bg bgimg-1">
<div class="container text-center h-100">
<div class="caption flex-column justify-content-center align-items-center d-flex h-100 wow animate__animated animate__fadeInUp animate__delay-1s animate__slow 1s">
<h2>Lorem ipsum dolor sit adipiscing elit</h2>
<h3>Aliquam Tincidunt</h3>
<div class="py-4 text-light">
<h4 class="text-light">John Doe</h4>
</div>
</div>
</div>
</section>
<section class="txt-content section-padding">
<div class="container">
<h2 class="main-heading">
Lorem ipsum dlor sit amet
</h2>
<div class="row">
<div class="col-md-4 order-md-2">
<div class="img-block wow animate__animated animate__fadeInRight animate__delay-1s animate__slow 2s mt-md-4">
<img src="images/plane.gif">
</div>
</div>
<div class="col-md-8 order-md-1">
<div class="txt-block mt-4">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.</p>
</div>
</div>
</div>
</div>
</section>
<section class="txt-content section-padding primary-bg text-white signature-section">
<div class="container">
<h2 class="main-heading text-center wow animate__animated animate__backInUp animate__delay-1s animate__slow 1s">
Praesent dapibus neque id cursus faucibus
</h2>
<div class="row">
<div class="col-12 text-center mt-4">
<img src="images/4.jpeg" class="d-inline-block wow animate__animated animate_rotateIn animate__delay-1s animate__slow 2s">
</div>
<div class="txt-block mt-3 mt-md-5 wow animate__animated animate__fadeIn animate__delay-1s animate__slow 1s">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.</
<p>Ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </p>
<p>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci.</p>
<p>Sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.</p>
</div>
</div>
</div>
</section>
<section class="txt-content section-padding">
<div class="container">
<h2 class="main-heading">
Praesent dapibus neque id cursus faucibis
</h2>
<div class="row">
<div class="col-md-4 order-md-2">
<div class="img-block wow animate__animated animate__fadeInRight animate__delay-1s animate__slow 2s mt-md-4">
<img src="images/5.jpeg">
</div>
</div>
<div class="col-md-8">
<div class="txt-block mt-4">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.</p>
<p>Ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. </p>
<p>Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.</p>
</div>
</div>
</div>
</div>
</section>
<section class="txt-content section-padding parallax-bg bgimg-2">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="img-block wow animate__animated animate__fadeInLeft animate__delay-1s animate__slow 2s mt-md-4">
<img src="images/6.jpeg">
</div>
</div>
<div class="col-md-8">
<h2 class="main-heading mt-3 mt-md-4">
Praesent dapibus neque id cursus facibus
</h2>
<div class="txt-block mt-4">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</p>
<p>Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.</p>
</div>
</div>
</div>
</div>
</section>
<section class="txt-content section-padding">
<div class="container">
<h2 class="main-heading">
Pellentesque habitant morbi tristique senectus etrs
</h2>
<div class="row">
<div class="col-md-4 order-md-2 wow animate__animated animate__fadeInRight animate__delay-1s animate__slow 2s mt-md-1">
<div class="img-block mt-3">
<img src="images/7.jpeg">
</div>
</div>
<div class="col-md-8">
<div class="txt-block mt-4">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. </p>
<p>Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.</p>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
style.css
*{
margin:0;
padding: 0;
}
ul{
list-style: none;
padding-left: 0;
}
img{
max-width: 100%;
height: auto;
}
body{
font-weight: 200;
font-size:14px;
line-height: 1.5;
color:#1A1A1A;
}
.main-header{
width:100%;
background:rgba(0,0,0,.6);
z-index: 11;
}
.logo img, .logo{
max-width: 100px;
}
.social-icons{
margin-bottom: 0px;
}
.social-icons li{
margin:0 .4rem;
}
.social-icons li a i.fab{
color:#fff;
font-size: 1.2rem;
transition: all .3s ease 0s;
}
.social-icons li a:hover i.fab{
color:#fb9b09;
}
.parallax-bg{
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.banner{
color:#fff;
background-position: top center;
}
.bgimg-1{
background-image: url('../images/1.jpeg');
min-heiht:100%;
}
.bgimg-2{
background-image: url('../images/2.jpeg');
color: #fff;
position: relative;
}
@media only screen and (max-device-width:102px){
.parallax-bg{
background-attachment: scroll;
}
}
.banner:before, .bgimg-2:before{
content:'';
position: absolute;
background: rgba(0,0,0, .5);
left:0;
right:0;
top:0;
bottom:0;
}
.banner h2{
font-size:2.5rem;
color:#fff;
margin-top:13rem;
}
.fullscreen{
height:100vh;
}
@media (min-width:768px){
.banner h2{
font-size:5rem;
}
}
.caption{
position: relative;
z-index: 1;
}
.main-heading{
line-height: 1.5;
}
.section-padding{
padding:2 rem 0;
}
@media (min-width: 768px){
.section-padding{
padding:8rem 0;
}
}
.txt-block p{
font-size:1.2rem;
}
.primary-bg{
background:#8f0927;
}
