Kevin Powell - Community•7mo ago

A more coherent scheme to make my parallax responsive

GH:https://github.com/nnall/hm-frontend-Nick.git I have a 2 - page site in react where, in each of 'page''s directory, 'Home' & 'AboutUs', each has a similarly laid out/schemed 'parallax.css', solely for adjusting my parallax groups inside of the parallax wrapper parent, root element of the component. I'm only using CSS and 'perspective' currently and my components' structure for parallax look like this:

<div className = "parallax_wrapper home_container">
  <div className = "parallax_group">
      <div className = "parallax_layer">centered content box</div>
  </div>
</div>

<div className = "parallax_wrapper home_container">
  <div className = "parallax_group">
      <div className = "parallax_layer">centered content box</div>
  </div>
</div>

The "wrapper" component gets the perspective setting, and then all "group" and "layer" elements get "transform-style: preserve-3d". My question here has to do with my parallax.css code, which is working mobile first on these parallax wrapper containers, and is setting and resetting the heights of the first-child "group" elements, in vh, starting tallest for mobile, and gradually with media-query breakpoints, tapering the heights down to less and less 'vh'. Not all "groups" are the same height, so that also has to be accounted for. Is there a better strategy for this with respect to handling responsiveness so that my "group" elements - scrolling slightly slower than their "top_layer" children- can be more reliably resized when the screen changes, so as to not constantly risk overflow/too much height, etc? I continue to spot breaks in the layout, although I've somewhat got everything scrolling with enough space at this point. I'm just looking for a more reliable approach.

GitHub

GitHub - nnall/hm-frontend-Nick

Contribute to nnall/hm-frontend-Nick development by creating an account on GitHub.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

A more coherent scheme to make my parallax responsive