Parallax scrolling effect using CSS.
Parallax is a 3d effect used in various websites to make webpages attractive . In this effect, as we scroll, the background of the webpages moves at different speed than the foreground making it look effective.
example website : firewatchgame.com
Syntax:
This property is used to determine whether a background image is fixed or scroll with the page. Syntax : background-attachment: scroll/fixed/local;
This property determines the starting position of the background image. Syntax : background-position: value;
This property determines whether a background image will repeat or not and if repeated , how will it be repeated. Syntax : background-repeat: repeat/repeat-x/repeat-y/no-repeat;
This property determines the size of the background image. Syntax : background-size: auto/length/cover/contain/;
Sample Code
<html>
<head>
<style>
.parallax {
background-image: url("http://s1.picswalls.com/wallpapers/2015/09/20/2015-wallpaper_111525594_269.jpg");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<p>This is a Parallax</p>
<div class="parallax"></div>
<div style="height:1000px;font-size:60px;">
<center>Hi</center>
</div>
</body>
</html>
Share