Look into possibilities of "on scroll" text over full image

[NickHaggerty1]

For some of our partner content is produced in a solution called VEV. To try an replicate some of the content, could we look into whether on scroll text over image/background colour is possible. How complicated etc?

https://partnerstudio.vev.site/oljegass-novdes-2023/

Another example:
https://arsrapport.eidsiva.no/

[fernandolucchesi]

Book a chat with Mette and Nick to discuss / understand the requirements for this

[padms]

@NickHaggerty1 Please have look at this clipping and let me know your comments on the parallax effect.
[Uploading... Screenshare - 2024-01-31 5_56_52 PM.mp4]

[padms]

Private Zenhub Video

[NickHaggerty1]

@padms Hey. Thanks for this. Interesting.
I guess the part on 0.17. is the scrolling text part within the image frame.
I think we would have to look at a few things:

• Smaller column widths.
• Option to have column: Left. Center. Right
• I suspect we would need to have an overlay to darken/lighten the image to make text more readable.
• placement on where the text starts: Like on the link example above, the image is almost in place and then the text emerges from the lower part of the image and then starts scrolling up the image

Does this make sense? Happy to have a meeting on this

[padms]

@NickHaggerty1 Lets have a chat on this.

[padms]

@NickHaggerty1 This is ready for first round of review. Can be tested in dev.

[NickHaggerty1]

@padms Hey, not sure how to test? Couldnt seem to see any options for this in any components? Perhaps there is an alternative area its been pushed to? I have a link to here: https://studiov3-global-development-equinor-web-sites-dev.c2.radix.equinor.com/global-development/desk/topicContent

[padms]

@NickHaggerty1 Available now for test

[NickHaggerty1]

@padms This is looking great. Im super excited about this. Great work.. I have a couple of things to discuss. Maybe better on a call? Do you have 10 mins Friday? Let me know what works for you.

[padms]

@NickHaggerty1 I am free all day after 10:30

[NickHaggerty1]

@padms thanks for the meeting. Couple of adjustments as discussed

• On the apple example https://www.apple.com/careers/us/ it seems the transparency layer over the image comes in as the text merges in on scroll. So image is mostly seen without transparency first. Possible? Not a MUST!
• The centre text option is still left aligned (it is correctly placed in the centre)
• I would like to try the left and right aligned text to come in a little more from the edge. In line with equinor logo? Im not sure of the guideline set up but I know @BorghildSelle had some thoughts in simplifying this.
• I think the width of the text component should be a little wider also (15 to 20%?)
• Mobile... hmmmm. For now lets remove the set up on mobile. The "animation on" option doesn't seem to work. Also there is an issue with crop. An image cropped/chosen correctly on desktop is fine but the image doesnt scale on mobile, often losing the focal point of the image. I notice the apple example above has an entirely different image field when going to mobile. Maybe this a phase two to explore a separate image/crop option for mobile.
• Another phase two option would be to have a colour and/or gradient background option for on scroll content.

[padms]

@NickHaggerty1 This is ready for review with the below changes

• On mobile devices, Text block follows image instead of having it as background
• Image dimming happens as the content emerges. ( only if animation is enabled otherwise the whole background is dimmed).
• Text alignment adjustments.

[NickHaggerty1]

@padms Approved. Thanks for the all effort and discussions on this one. Really like how you solved the transparency overlay now. Opens some opportunities and exciting to explore this more too. @meols FYI

[padms]

flackr/scroll-timeline#240.
Firefox and safari does not support view-timeline. Polyfill does not work with next js, see above.