Jumping stars

[haddersbadders]

A couple of issues I found in the CSS:

absolute & relative positioning

When you want to position elements using absolute you need to make sure their parent container is set to position: relative.

You haven't done this. The parent container is <section class="facts"> so you need to create a rule in CSS thast sets its position to relative.

This means the stars and text can be positioned with precision.

positioning the stars

Individual stars have position defined as relative e.g.

.number1{ position:relative;
  bottom:400px;
  left: 245px;
}
.number2 {position:relative;
  bottom:225px;
  left:320px;}
etc...

Take out position: relative; from each of these - it's messing things up!

Instead, apply absolute position to the class .star. You have that class applied to each star image, so each one of those will now be positioned absolute.

fix the text

You should find less jumping stars now. But when text is revealed, stars jump down a line. I think this is becasue your text DIVs aren't positioned absolute.

If you want them to be positioned around the Alpacas, you need to employ absolute positioning. If not, then you just need to move each text DIV outside of the .facts section.

To get quick access to all those DIVs inside the .facts section you can use the CSS selector

.facts > div {

}

.. and set position there.

[terribleteri]

Thank you very much @haddersbadders

[terribleteri]

Although, my scroll magic is still a bit off unfortunately but I'll get it right somehow haha @haddersbadders

[terribleteri]

All the stars an text are working fine now, thank you so much @haddersbadders