current position:Home>Think ahead and then how to make the pictures in the article scroll in and out with the screen? This is how I achieved it

Think ahead and then how to make the pictures in the article scroll in and out with the screen? This is how I achieved it

2022-01-29 15:23:56 zz

background

There's a demand recently , The picture slides in and out as the screen scrolls . Let me think , Isn't this animation . Refer to the implementation of online (javascript30), Finally, I have an idea . Really should be a stem . The product has three treasures , Popup , Animation plus guidance ; Design has three treasures , transparent , Shadow and fillet ; There are three treasures in operation , SMS , Lucky draw plus red envelope ; Programmers have a treasure , This can't be done .

Ideas

  • Get the elements that must be in all the pictures on the page
  • Rolling event monitoring
  • Dimension acquisition and processing
  • Scroll to the condition judgment of the specified area
  • Slide in slide out animation

First step

Let's write out the basic style first

  <div class="site-wrap">
		    <h1> Scroll quietly </h1>
		
		    <p> Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio </p>
		    <p> Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio </p>
		    <p> Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio </p>
		    <p> Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio </p>
		    <p> Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo Bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio </p>
		    <p> Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo Bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio </p>
		
		    <img src="http://unsplash.it/400/400" class="align-left slide-in">
		
		    <p> Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo Bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird worker Studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo Bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird worker Studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo Bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio </p>
		
		    <img src="http://unsplash.it/400/401" class="align-right slide-in">
		
		    <p>  Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo Bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird worker Studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo Bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird worker Studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo Bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird worker Studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio </p>
		
		    <img src="http://unsplash.it/200/500" class="align-left slide-in">
		
		    <p> Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo Bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird worker Studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio  <img src="http://unsplash.it/200/200" class="align-right slide-in">  Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo Bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird worker Studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo Bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird worker Studio cuckoo studio cuckoo studio </p>
		
		
		    <p> Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo Bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird worker Studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo Bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird worker Studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio </p>
		
		    <img src="http://unsplash.it/400/400" class="align-right slide-in">
		
		    <p> Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo Bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio .</p>
		    <p> Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo Bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird worker Studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo Bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird worker Studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo Bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird worker Studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio Cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo studio cuckoo Bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio cuckoo bird studio </p>
		
		  </div>
 Copy 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 code 

The second step

At this time, we can see the effect picture , Then let's think about how the pictures come in and out when we scroll the screen . 127.0.0.1_8848_%E4%B8%8D%E7%9F%A5%E9%81%93%E7%9A%84javsscirpt_6.html.png

    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 code 

Train of thought explanation

  1. First, we get all the pictures involved
  const slideImages = document.querySelectorAll('.slide-in');
 Copy code 
  1. Rolling event monitoring
    function checkSlide(e) {
           console.log(e);
    }

      
   window.addEventListener('scroll', debounce(checkSlide));
   
 Copy code 
  Listen for page scrolling events , You can type the event object first to see . At the same time, it can also be used to print the values of various sizes in the next debugging process , To help us feel the meaning of each size .
 
 In addition, because each scroll triggers a listening event , It will reduce  JavaScript  Operational performance , So use  `debounce`  Function to reduce the number of triggers .
 Copy code 
  1. Picture Computing
    //  Slide the bottom of the page less half the height of the picture 
    const slideInAt = (window.scrollY + window.innerHeight) - img.height / 2;
    //  The distance from the bottom of the picture to the top 
    const imgBottom = img.offsetTop + img.height;
    
     Two critical points need to be used to determine whether the picture is in the area to be displayed , Therefore, two values are used to access the result of this condition ( To ensure that the result of each event monitoring is assigned to the constant light , Not with me  `window`  Attribute value change ).
   
    //  Has slipped past half of the picture 
    const isHalfShow = slideInAt > img.offsetTop;
    //  Not completely over the picture 
    const isNotScrollPast = window.scrollY < imgBottom;
 Copy code 
  1. Add animation class name , Finally, even if it is finished
    if (isHalfShow && isNotScrollPast) {
        img.classList.add('active');
    } else {
        img.classList.remove('active');
    }
     Copy code 

Last

The code has been posted , You can copy to the local browser by yourself . Be accomplished , The rich little hand remembers One key, three links Oh !!!

1.gif

Recommended reading

copyright notice
author[zz],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/01/202201291523480165.html

Random recommended