Skip to content

Instantly share code, notes, and snippets.

@POMXARK

POMXARK/parallax-scroll-effect.html

Created July 7, 2024 07:44
Show Gist options
  • Save POMXARK/f07d786eb0092d71f73614a8e34e745a to your computer and use it in GitHub Desktop.
Save POMXARK/f07d786eb0092d71f73614a8e34e745a to your computer and use it in GitHub Desktop.
Download ZIP
parallax-scroll-effect
Raw
parallax-scroll-effect.html
// https://codepen.io/chen1223/details/pqZWbg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
* {
font-family: 'Roboto Condensed', sans-serif;
}
body {
margin: 0;
}
.parallax-wrapper {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
.background {
background-position: center;
background-size: cover;
display: flex;
flex: 1 0 auto;
position: relative;
z-index: -1;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
}
.background--spring {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/d/da/Precincts_of_Watari-jinja_shrine_in_Spring_season_2.JPG');
}
.background--summer {
background-image: url('https://images.pexels.com/photos/375152/summer-sun-blooming-season-375152.jpeg?cs=srgb&dl=beautiful-bloom-blossom-375152.jpg&fm=jpg');
}
.background--fall {
background-image: url('https://images.pexels.com/photos/33060/road-forest-season-autumn.jpg?cs=srgb&dl=autumn-fall-forest-33060.jpg&fm=jpg');
}
.background--winter {
background-image: url('https://images.pexels.com/photos/235595/pexels-photo-235595.jpeg?cs=srgb&dl=branches-cold-season-235595.jpg&fm=jpg');
}
.title {
position: absolute;
margin: 0;
top: calc(50% - 50px);
width: 100%;
left: 0;
right: 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 5px;
height: 100px;
color: white;
font-size: 5rem;
background: rgba(0,0,0,0.4);
}
.season-desc {
z-index: 1;
position: relative;
background: #282E34;
color: white;
font-size: 1.1rem;
letter-spacing: 2px;
line-height: 2em;
padding: 3rem;
height: 100vh;
margin: 0;
display: flex;
.desc-wrapper {
margin: auto;
box-sizing: border-box;
}
.season--title {
text-align: center;
font-size: 4rem;
letter-spacing: 5px;
text-transform: uppercase;
margin: 20px 0;
}
.season--about {
margin-top: 50px;
padding: 0;
}
}
@media (max-width: 998px) and (orientation: portrait) {
.season-desc {
padding: 1.5rem 20px;
font-size: 1rem;
height: unset;
min-height: 100vh;
.season-title {
font-size: 2.5rem;
margin: 20px 0;
letter-spacing: unset;
}
.season-about {
margin-top: 20px;
}
}
}
</style>
<body>
<div class="parallax-wrapper">
<div class="background background--spring">
<h2 class="title">Spring</h2>
</div>
<section class="season-desc">
<div class="desc-wrapper">
<h3 class="season--title">Spring</h3>
<p class="season--about">Spring is one of the four conventional temperate seasons, following winter and preceding summer. There are various technical definitions of spring, but local usage of the term varies according to local climate, cultures and customs. When it is spring in the Northern Hemisphere, it is autumn in the Southern Hemisphere and vice versa. At the spring (or vernal) equinox, days and nights are approximately twelve hours long, with day length increasing and night length decreasing as the season progresses.</p>
</div>
</section>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment