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)