Fade In Fade Out
I am wanting to do a fade in on scroll, then fade out on scroll. I have followed Kevins tutorial on this, but its not working.
Is there another tutorial that I can add to my website, that I can use to make things fade in and out on scroll?
I saw the one Kevin did 4yrs ago, but that one does not really help considering that he is using grid-column, which I am not using.
I am needing something that I can implement fast, because I have to get this site up and running by tonight.
If you need me to clarify anything, let me know.
3 Replies
do you mean intersection observer?
here a really simple example.
create an intersection observer that recieves the element(s) you selected. it will observe if the element is within the viewport and adds a data-attribute
data-inview:true/false if it is or not.
then with css you can style the element based on that attribute value (in this case opacity)
https://codepen.io/MarkBoots/pen/WNPzgXK .for more in depth usage and options: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
WDS may break it down differently
https://youtu.be/-pDPASqX97w?si=GPRp21uQT3Qx28vs
This may be the video you’re following but in case its not -
https://youtu.be/T8EYosX4NOo?si=7O0xlo5yrf4rayK6
Without event listeners(this may be the same video you’re following)
https://youtu.be/VgS5CP7zlXE?si=66z00jpJmtJg86DP
Web Dev Simplified
YouTube
How To Create This Unbelievable CSS Scroll Animation
I was recently challenged on Twitter to recreate this amazing scroll based animation, and it was so fun. I even decided to make the challenge more difficult by doing nearly everything in just plain CSS instead of doing it all in JavaScript. In this video I show you how I created this animation.
📚 Materials/References:
GitHub Code: https://git...
Kevin Powell
YouTube
Introduction to the Intersection Observer JavaScript API
You can find the code here: https://www.youtube.com/watch?v=T8EYosX4NOo
Use the following link to get 2 FREE months to Skillshare: https://skl.sh/kevinpowell4
Intersection Observer is a JavaScript API that we can use to do a lot of really useful things that we used to have to rely on scroll event listeners for. Instead of firing off over and o...
Kevin Powell
YouTube
JavaScript Scroll Animation Tutorial | Web Animations API + ScrollT...
Scroll-based animations used to be pretty hard and usually meant turning to a library. With the Web Animations API and ScrollTimeline, it's now surprisingly easy to do!
🔗 Links
✅ The Polyfill: https://github.com/flackr/scroll-timeline
✅ The Discord community: https://discord.gg/nTYCvrK
✅ Doing this with CSS only (@scroll-timeline): https://you...