Search code examples
javascriptjqueryhtmlcssparallax

How to control element position when changing window size for parallax purpose

I am working on a parallax page and super frustrated when it comes down to keeping the elements position exactly as i want when the window size is changed (responsive). All my elements are text and therefor a bit challenging hence the font-sizes need to follow a long with the positioning. I do not know where to begin with this challenge, as i have been experimenting with the viewport units such as vw and vh without any luck.

I have attached three images that illustrates the element positioning i want to achieve. I have added a background color to the elements to illustrate the positions. How do i achieve this responsiveness on my elements?

Absolute position is a must hence i need to parallax the elements up and down without being independent of any orders.

Fiddle: https://jsfiddle.net/440k02wg/1/

HTML

<section>
  <div class="header__1">
    A LOT OF TEXT
  </div>
  <div class="header__2">
    BIT MORE TEXT
  </div>
  <div class="header__3">
     SOME TEXT
  </div>
</section>

CSS

body, html {
  height: 100%;
  background-color: black;
}

section {
  height: 100%;
  position: relative;
}

section > div {
  position: absolute;
}

.header__1 {
  font-size: 5vw;
  color: red;
  background-color: grey;
  top: 14vh;
}

.header__2 {
  top: 25vh;
  left: 4vw;
  font-size: 10vw;
  color: orange;
  background-color: white;
}

.header__3 {
  top: 48vh;
  left: 60vw;
  font-size: 5vw;
  color: blue;
  background-color: green;
}

Normal in width Scaled in width Scaled in height

Solution

  • Is position: absolute; crucial for you? Removing that makes the issue a whole lot simpler, since block elements positioned relatively or statically always stick to their siblings. I've updated your provided example with my suggestion (and some tweaks to have the elements align accordingly).

    Fiddle

    Hope it's of some help :)