MAKE A WEBSITE WITH PARALLAX EFFECT USING ONLY HTML AND CSS
hello everyone and welcome back to a new tutorial, in this tutorial I will show you how to make a small parallax effect and in the final, I will give you the source code of a beautiful website that has that effect.
What is a parallax effect?
good question and I will respond to you right now.
a parallax effect is a scrolling effect that is applied to the background and makes him scroll at a different speed than other elements, so it appears like it's fixed.
it's a very cool effect that will give dynamism and beauty to your website.
How to make this effect?
making this effect is very simple, we will create a div with class="section" for example, we will give to that div a full width and height in such a way that it will take the whole screen size.we will add to it a background image and we will add a property of background that is: background-attachment: fixed;
this is the full code of the section:
.section{
/* make it with the screen size*/
width:100vw;
heigth:100vh;
/* add the background */
background-image: url(https://images.unsplash.com/photo-1496737018672-b1a6be2e949c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1782&q=80);
background-position: center;
background-size: cover;
background-attachment: fixed;
}
and that's it, now you know how to make a parallax effect, and it's pretty simple.
now i will give you an example of a web site that you can do with that effect, it's a small traveling website for photograph or blogger, it's smooth and pretty, sorry i didn't make a full website it has only images and messages, but i will make a full website tutorial series in my youtube channel so you can subscribe and stay tuned.
Video tutorial
I-HTML part
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="full landing">
<div class="container">
<div class="welcome">
<h1>Welcome To Travel</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris maximus aliquam purus commodo consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut nec nibh ut sapien ultricies hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus vestibulum mollis. Curabitur porttitor fermentum ipsum, a congue metus mattis sit amet. In et pretium lacus.
</p>
</div>
</div>
</div>
<div class="main">
<div class="container">
<h2>Our gallery</h2>
<div class="gallery">
<img src="https://images.unsplash.com/photo-1510414842594-a61c69b5ae57?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
<img src="https://images.unsplash.com/photo-1508672019048-805c876b67e2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1093&q=80">
<img src="https://images.unsplash.com/photo-1473625247510-8ceb1760943f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=999&q=80">
<img src="https://images.unsplash.com/photo-1461237439866-5a557710c921?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1052&q=80">
<img src="https://images.unsplash.com/photo-1470138831303-3e77dd49163e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
<img src="https://images.unsplash.com/photo-1503457574462-bd27054394c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
<img src="https://images.unsplash.com/photo-1468078809804-4c7b3e60a478?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
<img src="https://images.unsplash.com/photo-1478562672393-2412e5b9d634?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
</div>
</div>
<div class="full description">
<div class="container">
<div class="welcome">
<h1>Thank you for your visit</h1>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
II-CSS PART
@import url('https://fonts.googleapis.com/css?family=Montserrat|Roboto');
*{
margin: 0;
padding: 0;
outline: 0;
}
h1,h2{
font-family: 'Roboto',sans-serif;
}
p{
font-family: 'Montserrat',sans-serif;
}
.full{
width: calc(100vw);
height: calc(100vh);
}
.container{
width: 80%;
position:relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.landing{
background-image: url(https://images.unsplash.com/photo-1496737018672-b1a6be2e949c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1782&q=80);
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.welcome{
width: 60%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
background: #fff;
box-shadow: 0 5px 5px rgba(64,64,64,.7);
padding: 30px 10px;
}
.welcome h1{
text-transform: uppercase;
margin: 15px 0;
}
.landing .welcome p{
line-height: 1.8rem;
}
.main{
padding: 0;
width: 100vw;
height:600px;
position: relative;
text-align: center;
}
.main .gallery{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 20px;
}
.main h2{
font-size: 3em;
margin-bottom: 25px;
}
.main .gallery img{
width: calc(25% - 10px);
height: 200px;
margin: 5px;
}
.description{
background-image: url(https://images.unsplash.com/photo-1414438992182-69e404046f80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1162&q=80);
background-position: center;
background-size: cover;
background-attachment: fixed;
}
thank you for reading this article and see you later of another Tutorial.
MAKE A WEBSITE WITH PARALLAX EFFECT USING ONLY HTML AND CSS
Reviewed by Medics
on
March 22, 2019
Rating:
Reviewed by Medics
on
March 22, 2019
Rating:
great
ReplyDelete