How to make the pictures in the article slide in and out with the screen? Here’s how I did it

• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

background

I recently received a request for an image to slide into an outline as the screen scrolls. I thought, well, that’s animation. See javascript30 on the web for an idea. I really got a meme. Products have three treasures, popover, animation and guidance; Design has three treasures, transparent, shadow and rounded corner; Operation has three treasures, SMS, lucky draw plus red envelope; Programmers have one thing that they can’t do.

Train of thought

• Gets the element that must be on all the images on the page
• Scroll event monitor
• Size acquisition and processing
• Scroll to the specified region to determine the condition
• Slide in slide out animation

The first step

So let’s write out the basic pattern

  <div class="site-wrap">
		    <h1>悄悄的滚动</h1>
		
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		
		    <img src="http://unsplash.it/400/400" class="align-left slide-in">
		
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		
		    <img src="http://unsplash.it/400/401" class="align-right slide-in">
		
		    <p> 布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		
		    <img src="http://unsplash.it/200/500" class="align-left slide-in">
		
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室 <img src="http://unsplash.it/200/200" class="align-right slide-in"> 布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		
		
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		
		    <img src="http://unsplash.it/400/400" class="align-right slide-in">
		
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室.</p>
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		
		  </div>
Copy the code

html { box-sizing: border-box; background:#ffc600; font-family:'helvetica neue'; font-size: 20px; font-weight: 200; } body { margin: 0; } *, *:before, *:after { box-sizing: inherit; } h1 { margin-top: 0; } .site-wrap { max-width: 700px; margin: 100px auto; background:white; padding:40px; text-align: justify; } .align-left { float:left; margin-right:20px; } .align-right { float:right; margin-left:20px; } .slide-in { opacity:0; transition:all .5s; }.align-left. Slide-in {transform:translateX(-30%) scale(0.95); }.align-right. Slide-in {transform:translateX(30%) scale(0.95); } .slide-in.active { opacity:1; transform:translateX(0%) scale(1); }Copy the code

The second step

Now that we can see the renderings, let’s think about how to scroll in and out of the image.

function debounce(func, wait = 20, immediate = true) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (! immediate) func.apply(context, args); }; var callNow = immediate && ! timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; const sliderImages = document.querySelectorAll('.slide-in'); function checkSlide(e) { sliderImages.forEach(sliderImage => { // half way through the image const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2; // bottom of the image const imageBottom = sliderImage.offsetTop + sliderImage.height; const isHalfShown = slideInAt > sliderImage.offsetTop; const isNotScrolledPast = window.scrollY < imageBottom; if (isHalfShown && isNotScrolledPast) { sliderImage.classList.add('active'); } else { sliderImage.classList.remove('active'); }}); } window.addEventListener('scroll', debounce(checkSlide));Copy the code

Thinking on

1. First we get all the images involved

  const slideImages = document.querySelectorAll('.slide-in');
Copy the code

2. Scroll event monitor

    function checkSlide(e) {
           console.log(e);
    }

      
   window.addEventListener('scroll', debounce(checkSlide));
   
Copy the code

For the page of the scroll event to listen, you can first print the event object to see. At the same time in the following debugging process can also use this to print the value of each size, to help us feel the meaning of each size. In addition, because listening events are triggered every time you scroll, which can degrade JavaScript performance, 'debounce' is used to reduce the number of times it is triggered.Copy the code

3. Image computing

// slideInAt = (window.scrolly + window.innerheight) -img.height / 2; // slideInAt = (window.scrolly + window.innerheight) -img.height / 2; Const imgBottom = img.offsetTop + img.height; Two critical points are needed to determine whether the image is in the region to be displayed, so two values are used to access the result of this condition (to ensure that the result of each event monitor does not change with the attribute value of 'window' after it is assigned to a steady light). Const isHalfShow = slideInAt > img.offsetTop; Const isNotScrollPast = window.scrolly < imgBottom;Copy the code

4. Add the animation class name and you’re done

   if (isHalfShow && isNotScrollPast) {
       img.classList.add('active');
   } else {
       img.classList.remove('active');
   }
   Copy the code

The last

The code has been posted and can be copied locally for browsing. Done, rich hands remember a key three even oh!!

Recommended reading

• # I use these ten kinds of wheels in the project to help me improve development efficiency and collection
• When to use the # JS arrow function, and when not to use it
• How can I summarize the difference between strict and non-strict?
• # I summarized the article File base64 Blob objects switching between easily