Parallax Scrolling Effect using only CSS 3

background-attachment fix your background image while you are scrolling your page. it has three useful attributes .

Scroll : The background image scroll with the page. this is default.

fixed : The background image will not scroll with page.

local : The background image scroll with the page contents.

Youtube Videos

Code

<!DOCTYPE html>

<html>

<head>

<title>Parallelx effect</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

.header{

width: 100%;

height: 60px;

background: #333;

}

.bg-image-1{

background-image: url('bg-img-1.jpeg');

background-position: center;

background-repeat: no-repeat;

background-size: cover;

height: 500px;

background-attachment: local;

}

.para{

padding: 50px;

font-size: 20px;

font-family: arial;

}

.bg-image-2{

background-image: url('bg-img-2.jpeg');

background-position: center;

background-repeat: no-repeat;

background-size: cover;

height: 500px;

background-attachment: fixed;

}

</style>

</head>

<body>


<header class="header">

</header>


<div class="bg-image-1">


</div>


<p class="para">

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>


<p class="para">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 class="bg-image-2"></div>


<p class="para">

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>


</body>

</html>

1  Comments