Thursday, December 24, 2020

Pure CSS Parallax Scrolling

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;
}






No comments:

Post a Comment

Fetching JSON data from REST APIs

data.json---------------------------------- [     {     "userId" : 1 ,     "id" : 1 ,     "title" : "sunt...