Vanilla JavaScript Slide In on Scroll -

[@ak-loz]

I like these a lot. Saves myself time and frustration.

[@markday3145]

Thanks for the series! Having real-world homework helps me hone my skills better. Once I knew what you were going for, I coded it up a little differently. I went for variables to represent the important offsets in the window and image, then did simple comparisons between them. Seemed more readable to me. // Check all of the images and slide them in or out as needed function slideImages(e) { // What part of the content is visible in the window? const windowTop = window.scrollY; const windowBottom = window.scrollY + window.innerHeight; images.forEach(function(image) { const imageTop = image.offsetTop; const imageBottom = image.offsetTop + image.height; const imageMiddle = (imageTop + imageBottom) / 2; // The image should slide in if its middle is visible in the window if (imageMiddle >= windowTop && imageMiddle windowBottom) { image.classList.remove('active'); } }); }

[@danbuild977]

Yeah I like that a little better too. Thank you Mark!

[@davlewis2011]

Glad I came to KZbin for this vs his site, so I can read people's comments. I definitely like your implementation a lot better. It makes sense what is happening. I love wes but his was a little confusing. Over a year ago and your comment is still providing value. Thank you for this!

[@flamethrower883]

Great exercise. I personally don't like the feature of removing the active class when the user scrolled past the image, so I did not include it in my solution. But, to each their own.

[@swastikrana2670]

Hi Paulo , Did you easily understand the calculation part??

[@nomdplume6166]

Thanks for making this! Super useful and well done.

[@thomasprior5713]

Awesome video. What would I do if I wanted to slide in paragraphs or whole divs?

[@andrewvathanakamsang6404]

You can apply the .slide-in class to the div but instead of sliderImage.height you would want to do sliderImage.offsetHeight. Perhaps rename sliderImage to sliderDiv for clarity.

[@horoman]

Hey Wes Bos the quality of the video looks too much compressed

[@slicerabbit6166]

that's what youtube does when the video contains a lot of information, which this does. all the text on the left accounts for a lot of information. find a video with noise in it, and you'll see the same thing.

[@scriptskillz]

Any reason not to use intersection observer instead?

[@aya2222]

I'm using intersection observer for my project but still I think we need to understand how it works without Intersection Observer API .

[@san_tient]

its hard to imagine numbers.. you have to console log to understand values of variables if dealing with numbers

[@ИванКурочкин-с9м]

Now Wes Bos, finally tell us what the music is playing at the beginning.

[@eh-lo2do]

what about getBoundingClientRect() ?

[@danbuild977]

Hi Brilliant Tutorials as always.I noticed that you use the .'sliderImage' variable quite heavily. Is there a way to explicitly state that variable and still have it make contextual sense in the current code? I find it a little confusing as you appear to have implied its use from the forEach. Rather than stating it explicitly like you did with its collective superior variable - (.sliderImages).

[@sateeshmodukuru2]

Is there a draw back to writing the function like this: function checkSlide() { sliderImages.forEach((sliderImage) => { const slideInAt = window.scrollY + window.innerHeight > sliderImage.offsetTop + sliderImage.height / 2; const scrolledPast = window.scrollY > sliderImage.offsetTop + sliderImage.height; if (slideInAt) sliderImage.classList.add("active"); else sliderImage.classList.remove("active"); if (scrolledPast) sliderImage.classList.remove("active"); }); }

[@shubhamdas9489]

What's the text editor that you are using????

[@uzair004]

VS code

[@bluex217]

stuck getting this to work as offsetTop is undefined

[@DogmaKrone]

It's not working for me. The only thing i know is that the const slideInAt is always NaN. It became a number only when i delete the " - sliderImage.Height / 2".

[@woutii]

I got the same problem :(

[@XxBobynoobxX]

Replace the height by offsetHeight and that's it

[@nathancornwell1455]

its lowercase h on height ...JS is case sensitive

[@vergilkelley901]

also can you show the html? Im not sure I have all of the classes attached to the correct elements because its not working.

[@FriendlyKnowledge]

github.com/wesbos/JavaScript30/blob/master/13%20-%20Slide%20in%20on%20Scroll/index-FINISHED.html

[@vergilkelley901]

I can console log the scrollY but I cant get any console logs to show after sliderImages.forEach(sliderImage => {

[@kamransiddique9311]

I also want to add effects to text, so how I have to code.

[@lardosian]

How many years experience would be required to be expected to be able to write that debounce function, thanks.

[@shashankmadan1711]

a whole lot. its functional js...

[@NikolaZagorac]

Thanks!

[@NikoBellicGTAIVPL]

USING INTERSECTION OBSERVER API (images both appear and hide on 50% of their height): const sliderImages = document.querySelectorAll('.slide-in'); const createObserver = () => { const options = { threshold: 0.5 } const observer = new IntersectionObserver(entries => { entries.forEach(entry => entry.target.classList.toggle('active', entry.isIntersecting)) }, options); sliderImages.forEach(sliderImage => observer.observe(sliderImage)) } window.addEventListener('load', createObserver);

[@markocatela9606]

Hello Wes and everybody else... awesome tutorial! I managed to do all that but my problem is that my content needs to slide in not only when i SCROLL to specific point but when i click on anchor in my navbar which leads me to the position in html where my sliding is aswell... When i click on navbar it brings me to this point and event is not triggering untill i scroll up or down a bit (even 1px will trigger it)... anyone here knows the solution to this issue? thank you

[@droodthedude]

did you find a fix for it? I tried to simply add an event listener on the nav links and add the class .active when clicked, but it does not seem to work constantly. Kinda weird :D

[@karlomoonblade]

get the id of the area then id.pageoffestY

[@nathancornwell1455]

you could honestly do that with nothing but CSS and the :target pseudo class

[@Suneriins234]

Just without debounce code look like this.Only 10 lines..!I love it! const allimages = document.querySelectorAll('.slide-in'); window.addEventListener('scroll',slidein); function slidein() { allimages.forEach(images => { const sliderimages = (window.scrollY + window.innerHeight) - images.height / 2; const sroldown = sliderimages > images.offsetTop; if (sroldown) {images.classList.add('active') } else { images.classList.remove('active'); } }) }

[@kirtperez8048]

But you need debounce for performance issues...

[@Gentarozzo]

Not working in IE... also IE 11

[@vadimrozhansky9843]

Commonly I agree with you, but specifically IE doesn't support default parameters in functions (and you can see them in debounce function's definition). And it doesn't support forEach method. And window.scrollY too... But all this easy to fix.

[@vitfl2580]

Well, use BABEL in your workflow and let him transpile your ES6+ code to standards supported by browsers that you need.

[@ИванКурочкин-с9м]

@@vadimrozhansky9843 IE 11 supports forEach.

[@abdelrahman5094]

convert the node list to an array first becuase forEach can't work with node list directly

[@nathancornwell1455]

@@ИванКурочкин-с9м I.e. doesn't support forEach on nodelists though

[@khotambakhromov]

can someone give a bit description to the debounce() function? it is interesting to know ) and what should I learn to understand these kinds of functions?

[@nathancornwell1455]

So, theres a lot going on in that particular debounce function. But, essentially what is happening is that debounce function is running immediately on page load. But , it returns a function and that function is calling a setTimeout . When you assign a setTimeout to a variable, it returns an ID. So, each time that return function runs, it checks to see if there is a timeout and if there is , it clears the timeout then starts the timeout all over . And if enough time passes(in this case 20ms) without that return function being called, the function inside the setTimeout will finally run. So you wanna learn about first class functions, function expressions, and then call ( ) , apply ( ), bind ( ) and setTimeout.

[@anokhps3088]

@@nathancornwell1455 can you explain what immediat argument is doing in the debounce function and why later function is set.

[@chandrabhan3501]

Awesome dude

[@arunkaiser]

From where can i get this code ?

[@kissu_io]

github.com/wesbos/JavaScript30/tree/master/13%20-%20Slide%20in%20on%20Scroll

[@awekeningbro1207]

we can do this with lazy loading too..

[@aleksandergorczyk1582]

I would love to understand debounce function jesus

[@javascriptwar9525]

we could check image box by offset().Top of its parent - and half of self..??👻

[@pranitchavan4549]

USING INTERSECTION OBSERVER API : const common = document.querySelector('.site-wrap'); const images = common.querySelectorAll('img'); function callback(entries) { const isIntersecting = entries[0].isIntersecting; if (isIntersecting) { entries[0].target.classList.add('active'); } } const obs = new IntersectionObserver(callback); images.forEach((img) => obs.observe(img));

[@YaniaRZ]

it's cool? but this implementation doesn't work right. The images don't hide when page is scrolled down

[@YaniaRZ]

and I don't understand where we use common?

[@maaniiftikhar5759]

Can i get the code?

[@kissu_io]

Go to the repo: github.com/wesbos/JavaScript30/tree/master/13%20-%20Slide%20in%20on%20Scroll