The parallax scrolling effect is a website trend where the background content like the image or any color, is moved at a different speed than the foreground content while scrolling upwards or downwards.

Here I'm going explain the difference between a website with and without parallax scrolling:

1.with parallax scrolling.

2.without parallax scrolling.

Note: The parallax scrolling effect does not always works on mobile devices/smart phones. For that you need to use media queries to turn off the effect on mobile devices.

1.with parallax scrolling.

Here you need to use a container element and add a background image to the container with a particular height. Then use the background-attachment: fixed to create the real parallax effect. The other background properties are used to center and scale the image exactly:

HTML

<!DOCTYPE html>
<html>
<head>
<title>Parallax scrolling effect</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</style>
</head>
<body>
<p>Scroll-Up & Scroll-Down this page to see the parallax scrolling effect.</p>
<div class="parallax">
 <p>A sample text  on image to form-up on image.A sample text  on image to form-up on image.A sample text  on image to form-up on image.A sample text  on image to form-up on image.A sample text  on image to form-up on image. the dummy text on image the dummy text on image the dummy text on image the dummy text on image the dummy text on image the dummy text on image.</p>
</div>
<h6>A sample text for the below parallax image.A sample text for the below parallax image.A sample text for the below parallax image.A sample text for the below parallax image.A sample text for the below parallax image.A sample text for the below parallax image.A sample text for the below parallax image.</h6>
</body>
</html>

CSS

.parallax {
 /*using the css background property to attach the image */
 background-image: url("https://images.unsplash.com/photo-1447878035468-f6464b327023?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
 /* Set a particular height to that image */
 min-height: 700px; 
 /* Create the parallax scrolling effect for using the image */
 background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}
/* extra content css*/
p{
padding: 150px;
font-size: 28px;
color: #000;
line-height: 65px;
}
How to create a parallax scrolling effect using HTML and CSS

How to create a parallax scrolling effect using HTML and CSS


2.without parallax scrolling

Here you need to use a container element and add a background image to the container with a particular height and here we need use the background-attachment: scroll to create without parallax scrolling. The other background properties are used to center and scale the image exactly.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Parallax scrolling effect</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</style>
</head>
<body>
<p>Scroll-Up & Scroll-Down this page to see the parallax scrolling effect.</p>
<div class="parallax">
 <p>A sample text  on image to form-up on image.A sample text  on image to form-up on image.A sample text  on image to form-up on image.A sample text  on image to form-up on image.A sample text  on image to form-up on image. the dummy text on image the dummy text on image the dummy text on image the dummy text on image the dummy text on image the dummy text on image.</p>
</div>
<h6>A sample text for the below parallax image.A sample text for the below parallax image.A sample text for the below parallax image.A sample text for the below parallax image.A sample text for the below parallax image.A sample text for the below parallax image.A sample text for the below parallax image.</h6>
</body>
</html>

CSS

.parallax {
 /*using the css background property to attach the image */
 background-image: url("https://images.unsplash.com/photo-1447878035468-f6464b327023?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
 /* Set a particular height to that image */
 min-height: 700px; 
 /* Create the without parallax scrolling effect for using the image */
 background-attachment: scorll;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}
/* extra content css*/
p{
padding: 150px;
font-size: 28px;
color: #000;
line-height: 65px;
}