0

I have the following HTML structure:

<section class="mysection">
  <div class="parallax"></div>
</section>

 <section class="some-text">
  blah.....
</section>

Before using parallax on the parallax div, some text just sits immediately below the bottom border of mysection. This is the CSS for parallax. 

.parallax{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

When I scale parallax by 1.11111111, the parallax uses 100% width of the viewport. However, some text does not sits right beneath the parallax anymore. Instead, it overlaps with the parallax area. Here is a picture of a real-life situation:

enter image description here

How can I make some text always sits beneath the bottom border of mysection without overlap?

To be more detailed, I use a tool called ScrollMagic for this work if this is relevant.

kukkuz
  • 41,512
  • 6
  • 59
  • 95
curious1
  • 14,155
  • 37
  • 130
  • 231
  • 2
    the *overlapping* is expected, see [this](https://stackoverflow.com/questions/46154992/how-to-scale-so-that-container-also-grows-and-takes-up-space)... you can remove the *scaling*? – kukkuz Oct 04 '17 at 03:43
  • kukkuz, thanks for chiming in! I have to have the scaling because it is part of the web design. – curious1 Oct 04 '17 at 03:59
  • 1
    maybe a *hacky* fix using some `padding` or `overflow: hidden`... You can't avoid the overlapping I guess – kukkuz Oct 04 '17 at 04:59
  • Thanks for follow up with me. `padding` could be the solution for text. In my case, it is more than jus text. I have another question about an absoute-positioned image. https://stackoverflow.com/questions/46556948/make-parallaxed-element-completely-opaque – curious1 Oct 04 '17 at 05:03
  • 1
    If the next div is always supposed to come after the parallax one, why not put both in a container and scale that one. – Mr Lister Oct 04 '17 at 06:13
  • The text is not part of the parallex/tween by design. – curious1 Oct 04 '17 at 15:12

0 Answers0