Parallax Scrolling Effect With CSS

Parallax Scrolling Effect With CSS

Have you ever come across a website, which gives you 3D effects to your eyes while scrolling up & down?

It gives 3D effects through the background which means that the content keeps moving & the background is still steady. Right?

You must be thinking that this is something that can be done using some other web technologies without HTML, CSS & JS. But the truth is you can create the same effect with basic CSS & HTML also & using only 5-6 CSS properties. That effect is called a Parallax Scrolling Effect.

Now let's see how to create a Parallax Scrolling Effect using CSS? But before switching to the steps let's see what it is.

What is a Parallax Scrolling Effect? Parallax Scrolling Effect is a 3D effect that is used to make your website look more attractive.

In this effect, as we scroll a webpage, the background of the webpage gets scrolled at a different speed than the content of the webpage, which provides a different effect to the eyes.

If you want to look at the Parallax Scrolling Effect, here are examples -

● https://www.alexdram.com

● https://www.okalpha.co

● https://gardenestudio.com.br

This effect looks great but by the easiest way, you can add them to your webpages. Before turning to the actual code let's first understand how Parallax Scrolling Effect works in the above websites?

In the above websites, this effect is created by keeping images in the background steady that is without movement & other images are moving. This simple technique makes your website look brilliant.

Now let's see how to Parallax Scrolling Effect using CSS?

CSS properties we are going to use

background-attachment

In this property, we decide the background image should keep movable or it should be fixed with the scrolling.

Syntax

background-attachment : fixed/scroll/local;

background-position

This CSS decides the starting point of the background image. Here you decide the X-axis & Y-axis points or you decide the corner of the browser to start the background image.

Syntax

background-position: center/right top/left top/x,y

background-repeat

This property determines that the background image will repeat or will not repeat with scrolling.

Syntax

background-repeat : repeat/repeat-x/repeat-y/no-repeat;

where,

repeat - background image will repeat both vertically & horizontally

repeat-x -background image will repeat horizontally only

repeat-y - background image will repeat vertically only.

no-repeat - background image will not repeat.

background-size

This property will define the size of the background image.

Syntax

background-size : auto/length/cover/contain/;

where,

auto - Default value.

length - Sets the width & height of the background image.

percentage - Sets the width & height of the background image in the percentage of the container.

cover - scales the background images to be as large as possible so that the background gets completely covered by the background image.

contain - Stretches the image to the largest size so that its width & height can fit inside the content area.

Now, let's see an example for the same

<html>

<head>

<meta name="viewport"content="width=device-width, initial-scale=1">

<title>Parallax Effect using CSS</title>

<style>

body{

background-image: url(web_background.jpeg);

background -attachment: scroll;

background-position : center;

background- repeat : no repeat;

background - size : cover;

}

div{

color : black ;

height: 800px;

font-size: 36px;

}

</style>

</head>

<body>

<div>A container with the text & it's own background</div>

</body>

</html>

In the above code, you will find all the CSS properties related to the background & it is a very simple code that provides you a parallax effect.

If you want to run this code by yourself you can change the CSS background properties as per the above-mentioned syntax.

You've successfully subscribed to HTML5Awesome
Great! Next, complete checkout to get full access to all premium content.
Welcome back! You've successfully signed in.
Unable to sign you in. Please try again.
Success! Your account is fully activated, you now have access to all content.
Error! Stripe checkout failed.
Success! Your billing info is updated.
Billing info update failed.