Parallax effect with img tag, not background image

[ghisleouf]

Hi guys,

 

I'm back with another use case and another question.

I'm trying to reproduce this parallax effect : https://tympanus.net/Tutorials/SmoothScrollAnimations/ (that I could find from another question on the forum).

 

But ... I have to use img tag instead of background image.

In my example, I could position the img tag with the parent element padding trick (see its initial position set vs the debug green overlay pseudo element), and I assume I know this padding ratio.

Unfortunately, I can't find the correct ScrollTrigger settings to make it work properly.

 

If you have any suggestion or a debug idea, that's wold be awesome.

 

Thanks a lot for your help.

 

++

 

 

See the Pen WNZZWQd by ghislefou (@ghislefou) on CodePen

[OSUblake]

A similar questions was asked here. The concept would still the be same whether you're using an <img> or background-image.

 

 

 

[ghisleouf]

Hi @OSUblake, 

 

Thanks again for your quick answer.

I started from this example on the forum and I used this calculation on another parallax effect but I have to admit that could not make it work in my example.

 

I have updated it to activate the same technique on my example and as you will see, the y-axis positioning is not correct:

If you have any idea, that would be awesome.

 

Thanks again.

[ghisleouf]

Found it !

It was my css top property which was creating a positioning issue.

 

Thanks a lot for your help.

 

Merry Christmas.

[OSUblake]

8 hours ago, ghisleouf said:

I have updated it to activate the same technique on my example and as you will see, the y-axis positioning is not correct:

 

I'm not sure I understand by what you mean the positioning is not correct. If you're looking to move it in the opposite direction, you could just do a fromTo animation.

 

gsap.fromTo(img, {
      y: () => section.offsetHeight - img.offsetHeight,
    }, {      
      scrollTrigger: {
        trigger: section,
        scrub: 0.5,
        invalidateOnRefresh: true
      },
      y: 0,
      ease: "none"
    });

 

[ghisleouf]

Thank you @OSUblake,

It's fine for for me !

What I wanted to say is that I was defining in CSS a top:-10% (line 60 into my codepen example)absolute positioning of the img tag and doing it, the parallax animation was not working fine.

By removing it, it is perfect !

 

Thanks again for your precious help.