DEV Community

Cover image for Pure CSS parallax perspective beyond landscape images

Pure CSS parallax perspective beyond landscape images

Ingo Steinke, web developer on July 03, 2023

I researched many tutorials and examples about "parallax scrolling" effects, and I wasn't impressed. Most parallax examples were not elegant both i...
Read full post
Collapse
 
lebinhan profile image
Lê Bình An •

This is absolutely an amazing post, the content is great and what even better is that you have spent your own time and effort to research and conduct it. Not only present the code to create the effect, you also explained each of them care fully and comparing each of them to find the best solution.

Among thounsands of copy-paste content on the internet, this stand-out like a shining gem.

Good work my programmer! You deserve a heart.

Collapse
 
ingosteinke profile image
Ingo Steinke, web developer •

Thanks so much! I wasn't even sure if I wanted to publish this, but luckily I did :-)

Collapse
 
tleperou profile image
Thomas Lepérou •

can't agree more with you

thanks @ingosteinke

Collapse
 
ingosteinke profile image
Ingo Steinke, web developer • • Edited

As the pseudo-parallax approach based on 2d-Y-transformation can get quite hard to adjust (especially in a responsive CMS theme with many known unknowns), I revisited the real 3d approach using CSS perspective for a use case where I didn't have the double scrollbars problem, as the effect was designed to cover great parts of the page starting below the hero section.

I also find the 3d approach easier to comprehend. I have to admit that I never fully understood why and how exactly the 2d transformation of both foreground and background, plus the sticky positioning allowed the decorative background to shift against the foreground at all.

Here is a Codepen from August 8, 2023, featuring my latest experiment rewritten from a 2d-section to full-page 3d technique: codepen.io/openmindculture/pen/YzR...

Collapse
 
ingosteinke profile image
Ingo Steinke, web developer • • Edited

Work in progress, continued: instead of 100%, body height should become 100vh or rather 100dvh using dynamic height to prevent mobile phone glitches, and we need an explicit html { overflow: hidden if we want to use scroll events of descendant elements.

html {
  height: 100%;
  overflow: hidden;
}
body {
  height: 100%;
  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: scroll;
  transform-style: preserve-3d;
  perspective: 1px;
  perspective-origin: 0 0;
}
Enter fullscreen mode Exit fullscreen mode

This is the CSS that I used for kleiderordnung.berlin, an exceptional portfolio project described in my recent blog post.

Collapse
 
richard_moore_nz profile image
Richard Moore • • Edited

Wow that is just genius! Is it possible to have a second parallax layer, for example image boxes, moving at a slightly different to the speed of the text boxes when scrolling, and how would that be implemented?

My contribution to the code is to add to the cards an entirely css keyframe fade in and out.

@keyframes reveal {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.card {
/* existing css*/
  animation: reveal linear;
  animation-timeline: view();
}
Enter fullscreen mode Exit fullscreen mode

So many thanks for the code and the explanation.

Collapse
 
ingosteinke profile image
Ingo Steinke, web developer • • Edited

We must ensure that websites stay accessible and usable on older devices that don't support what we want to do here. We should also disable the effect for clients that prefer reduced motion! Features queries are fine in theory, but I ran into different kinds of issues:

  • decorated websites couldn't be scrolled on old iPhones
  • deactivating the scrolling effect still left z-index layer and transparency issues
  • a CSS hack intended to target older iPhones also applied to my modern desktop browser after switching from dark mode to light mode: An iPhone workaround broke my parallax scrolling effect 📵💔😲
ingosteinke

An iPhone workaround broke my parallax scrolling effect 📵💔

Ingo Steinke, web developer ・ Aug 12

#webdev #css #javascript #programming
Collapse
 
ingosteinke profile image
Ingo Steinke, web developer •

Update: in an earlier version of my post and codepen, I had removed the foreground's scaling, only to find out later that it actually compensates its parent's scaling. I updated the text and code accordingly.

Collapse
 
ingosteinke profile image
Ingo Steinke, web developer •

Thanks for sharing your example! I like it!

Collapse
 
idevgames profile image
iDev-Games •

Very in depth post! It's great to see but this is why I have created Trig.js so that we can make CSS scroll animations but make them simply and with complete control. Trig.js places the element position percentage, pixels or degrees outputs into CSS variables to use in your CSS however you would like. Opening many doors and possibilities. Take a look at this Trig.js tutorial to get a better idea of how you can work with it. It compliments CSS to achieve the way of working we would like to have while gaining complete control over your scroll animations.