Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by jose macedo
jose macedo
6,041 Points

how could you make something fade in or slide in when ever you scroll to it

how could you make a certain div fade in or slide in with javascript

Carlos Lantigua
Carlos Lantigua
5,938 Points

for fading you could do that with css "hover:" and "transition" classes. I am assuming you're talking about something like a navbar that reacts to a user hovering their mouse over. Google has amazing resources on how to do this easily and JS is only needed a little for the sliding, not for the fading.

jose macedo
jose macedo
6,041 Points

i want my content to fade in or slide in while you scroll down the webpage, like a div with a <p> in it or well just anykind of content pictures and all ..... kind of like this web template https://themewagon.com/themes/free-travel-agency-website-template/

Carlos Lantigua
Carlos Lantigua
5,938 Points

I see, these are called hover effects. They mainly use the "hover:" property in css mixed with the "transition". I have a link to W3School that does a good job of explaining these. https://www.w3schools.com/howto/howto_css_image_overlay.asp

1 Answer

Steven Parker
Steven Parker
242,796 Points
Steven Parker
Steven Parker
242,796 Points

In JavaScript, you can write code that responds when the window is scrolled. By comparing the current scroll position with that of your intended target element, you can then trigger a transform effect (fade or slide) when the element moves into view.

There's a web site called ScrollReveal that provides code for this effect. A quick search will turn up many others.

jose macedo
jose macedo
6,041 Points

i downloaded the file and opened it with sublime text.. thats a lot of code. i need to add all that code to my project?

Steven Parker
Steven Parker
242,796 Points
Steven Parker
Steven Parker
242,796 Points

You might not want to replicate that entire example, but it does show the significant elements. Perhaps all you need is an event handler with a couple of lines to trigger a fade transition. You can find many other (and likely much simpler) examples with a quick web search. Here, let me Google that for you. :laughing:

jose macedo
jose macedo
6,041 Points

yea everytime i google search it comes up with jquery answers, i kinda wanted to see if i could do this with just javascript

Steven Parker
Steven Parker
242,796 Points
Steven Parker
Steven Parker
242,796 Points

I can understand why folks might implement it that way, as jQuery makes things very convenient with it's fade and animation functions. But you can always substitute CSS transitions or animations and get the same effect with plain JavaScript. And there are plain-JavaScript equivalents for the jQuery event handlers and element position properties, though they may be a bit more verbose.