Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS change images and texts on scroll Reply To: change images and texts on scroll

#282177
Beverleyh
Participant

Sounds like you want to watch the scroll position of an element until it reaches a certain screen position, and then trigger an animation/reveal of another element. You can do this with JavaScript. There are various JavaScript scroll libraries available for this purpose: https://www.hongkiat.com/blog/scrolling-effects-js-libraries/

I rolled my own here http://fofwebdesign.co.uk/template/_testing/scroll-in-view/add-class-to-target-when-trigger-in-view-reduced.htm
The JS function watches the scroll position of A. When A is at the desired scroll position, a class is added to B. You can use the class that’s added to B to change its CSS (animate it, show it, hide it, make it sticky). Lots of possibilities. Here’s a version that adds a border http://fofwebdesign.co.uk/template/_testing/scroll-in-view/borders-on-scroll.htm