This is not my video
I just thought it was really helpful so I thought I would share it here.
The props go to Red Stapler
The code involved
This CSS wrapper is dead simple and the video explains it well so I won't go into too much detail here - but if you just want to see the code involved, here it is:
HTML
<body>
<div class="navbar"><span>CSS Parallax Scrolling Tutorial</span></div>
<div class="parallax-wrapper">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
....
....
Donec in justo eu ligula semper consequat sed a risus.</p>
</div>
</div>
<div class="regular-wrapper">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
....
....
Donec in justo eu ligula semper consequat sed a risus.</p>
</div>
</div>
</body>
CSS
html {
overflow: hidden;
}
body {
margin: 0;
font-size: 26px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: #ffffff;
height: 100vh;
perspective: 1px;
transform-style: preserve-3d;
overflow-x:hidden;
overflow-y:auto;
}
.parallax-wrapper {
width: 100vw;
height:100vh;
padding-top:20vh;
box-sizing: border-box;
transform-style: preserve-3d;
}
.parallax-wrapper::before {
content:"";
width: 100vw;
height: 100vh;
top:0;
left:0;
background-image: url("/trianglify.png");
position: absolute;
z-index: -1;
transform:translateZ(-1px) scale(2);
}
.regular-wrapper {
width: 100vw;
height:100vh;
padding-top:20vh;
background-image: url("/trianglify2.png");
z-index: 2;
position: relative;
}
.content {
margin: 0 auto;
padding: 50px;
width: 50%;
background: #aaa;
}
What I like about this method is that it's pure CSS and it's easy to replicate. I'm currently building a Vue component that will use this method nicely.
Top comments (0)