Scroll down effects

[Elia]

Hi, i am a new member and i need help. I found a script that interests me but I should edit it. I have attached the code, delete the comment to understand what it is. I should adapt the Image to the container that is climbing, so as to remain attached both vertically and horizontally to the center of the container. Could you help me? I tried to adapt it manually but then with larger screens it becomes unmanageable.
If it helps I'm using Bootstrap.

See the Pen GRmbreE by edalbe (@edalbe) on CodePen

[nico fonseca]

Hey @Elia welcome to the forum! 💚

Do you need something like this ? 

See the Pen 9ee2f57f2239a4c22a7d2df0c8e482fc by nicofonseca (@nicofonseca) on CodePen

[mikel]

Hey @nicofonseca,

 

Try ...

 

body{
  margin:0;
}
.scale {
  position: relative;
  height: 100vh;
  width: 100vw;
}

 

Happy tweening ...

Mikel

 

[nico fonseca]

@mikel much better now 🤘

[Elia]

5 hours ago, nicofonseca said:

Hey @Elia welcome to the forum! 💚

Do you need something like this ? 
 

 

@nicofonseca yes great thank you so much. But when I test on smartphone, the hero goes out of the container. How I can resolve this problem?

[nico fonseca]

@Elia i think you need to change this:
 

.scaleDown {
  width: 120vw;
  height: 120vh;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: red;
  transform-origin: 50% 50%;
}

for this

.scaleDown {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: red;
  transform-origin: 50% 50%;
}

I updated the Codepen so you can check if it is ok now 😉

[Elia]

6 hours ago, nicofonseca said:

Hey @Elia welcome to the forum! 💚

Do you need something like this ? 
 

 

@nicofonseca I tried but the image keeps coming out, probably the image is too big and doesn't fit well. Thank you so much for everything