Pure CSS Parallax Scrolling
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pure CSS Parallax Scrolling</title>
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header class="header_part">
<h1>Ujjwal Technical Tips</h1>
<p>Parallax Effects</p>
</header>
</body>
</html>
CSS
html{
height: 100%; overflow: hidden;
}
body{
color: #FFF; margin: 0; padding:0; perspective: 1px;
transform-style: preserve-3d; overflow: hidden; height: 100%;
overflow-y: scroll; overflow-x: hidden;
font-family: "covered By Your Grace", cursive;
}
.header_part{
box-sizing: border-box; min-height: 100vh; padding: 32vw 0 8vw;
position: relative; transform-style: inherit; width: 100vw;
}
header.header_part p{
font-size: 33px;
}
header h1{
margin-top: -100px; font-size: 65px; color: #FFF;
background-color: rgba(255,57,177, 0.3);
}
header, header::before{
background: 50% 50% / cover;
}
header::before{
bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0;
display: block;
background-image: url(https://images.unsplash.com/photo-1566227675319-d3498bb2b584?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80);
background-size: cover; transform-origin: center center 0;
transform: translateZ(-1px) scale(3); z-index: -1; min-height: 100vh;
}
header *{
font-weight: normal; letter-spacing: 0.2em;
text-align: center; margin: 0;
padding: 1em 0;
}
