Как задержать функцию Javascript, пока она не окажется в середине веб-страницы?

Question

Здравствуйте. На моей веб-странице есть анимация чисел, и я не хочу, чтобы анимация запускалась, пока она не окажется в середине веб-страницы. Я пытался включить Google Onscroll и другие варианты, но не смог заставить это работать должным образом.

Я предпочитаю, чтобы анимация не запускалась, пока посетитель не прокрутил до 472 пикселей. Как только веб-страница загружается, анимация номера начинается автоматически. Любая помощь, я был бы очень признателен.

// 472 px  -  Starts Yellow Counter Section

const counters = document.querySelectorAll('.counter');
const speed = 200; // The lower the slower

counters.forEach(counter => {
	const updateCount = () => {
		const target = +counter.getAttribute('data-target');
		const count = +counter.innerText;

		// Lower inc to slow and higher to slow
		const inc = target / speed;

		// console.log(inc);
		// console.log(count);

		// Check if target is reached
		if (count < target) {
			// Add inc to count and output in counter
			counter.innerText = count + inc;
			// Call function every ms
			setTimeout(updateCount, 1);
		} else {
			counter.innerText = target;
		}
	};

	updateCount();
});

.bg-yellow-white {
    background: #f7c51e;
    color: white;
}


.container {
    max-width: 1404px;
    margin: auto;
    padding: 0 2rem;
    overflow: hidden;
}


.l-heading {
    font-weight: bold;
    font-size: 4rem;
    margin-bottom: 0.75rem;
    line-height: 1.1;
}





/* Padding */

.py-1 {
    padding: 1.5rem 0;
}

.py-2 {
    padding: 2rem 0;
}

.py-3 {
    padding: 3rem 0;
}


/* All Around Padding */

.p-1 {
    padding: 1.5rem;
}

.p-2 {
    padding: 2rem;
}

.p-3 {
    padding: 3rem;
}

 /*  ======================== Red Block ======================== */


 .red-block {

    height: 472px;
    width: 100%;
    background-color: red;
 }


 /*  ======================== PROJECS COMPLETED  ======================== */

#projects-completed .container .items {

    display: flex;
    justify-content: center;
    flex-wrap: wrap;

}

#projects-completed .container .items .item .circle {

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

<div class="red-block">

    <p>red block</p>

</div>



<section id="projects-completed" class="counters bg-yellow-white">
    <div class="container">
        <div class="items">
            <div class="item text-center p-3">
                <div class="circle">
                    <div class="counter l-heading" data-target="1750">500</div>
                </div>
                <h2 class="py-2">Projects Completed</h2>
            </div>
            <div class="item text-center p-3">
                <div class="circle py-2">
                    <div class="l-heading counter" data-target="5">500</div>
                </div>
                <h2 class="py-2">Staff Members</h2>
            </div>
            <!-- <div class="item text-center p-3">
                <div class="circle">
                    <h3 class="l-heading ">1750</h3>
                </div>
                <h2 class="py-2">Projects Completed</h2>
            </div>
            <div class="item text-center p-3">
                <div class="circle py-2">
                    <h3 class="l-heading">5</h3>
                </div>
                <h2 class="py-2">Staff Members</h2>
            </div> -->
        </div>
    </div>
</section>

Answer 1

У wesbos есть отличное видео на этом https://www.youtube.com/watch?v=uzRsENVD3W8&list=PLu8EoSxDXHP6CGK4YVJhL_VWetA865GOH&index=14&t=0s

По сути, вам нужно прослушать прокрутку и проверить, где пользователь в настоящее время сравнивается с желаемым местом в px

Вы можете проверить код здесь и настроить его под свои нужды https://github.com/wesbos/JavaScript30/blob/master/13%20-%20Slide%20in%20on%20Scroll/index-FINISHED.html

Answer 2

Существует собственный javascript API для "прослушивания", когда пользователь в данный момент находится на странице с именем Intersection Observer . По сути, вы устанавливаете функцию обратного вызова, которая должна выполняться после прокрутки нужного содержимого.

Он используется для всех этих модных анимаций страниц, когда карты появляются, когда вы начинаете прокручивать страницу вниз, поскольку это намного эффективнее, чем прослушивание события прокрутки.

Кевин Пауэлл отлично справился видео об этом топи c.

Надеюсь, это поможет!

Answer 3

Вот вставленная копия кода, но она должна дать вам подсказку о том, как она должна работать:

document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  let active = false;

  const lazyLoad = function() {
    if (active === false) {
      active = true;

      setTimeout(function() {
        lazyImages.forEach(function(lazyImage) {
          if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.srcset = lazyImage.dataset.srcset;
            lazyImage.classList.remove("lazy");

            lazyImages = lazyImages.filter(function(image) {
              return image !== lazyImage;
            });

            if (lazyImages.length === 0) {
              document.removeEventListener("scroll", lazyLoad);
              window.removeEventListener("resize", lazyLoad);
              window.removeEventListener("orientationchange", lazyLoad);
            }
          }
        });

        active = false;
      }, 200);
    }
  };

  document.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  window.addEventListener("orientationchange", lazyLoad);
});

Answer 4

Попробуйте getBoundingClientRect(). document.querySelector( 'some element' ).getBoundingClientRect() даст вам свойства указанного c элемента

. Например, если вы хотите запустить анимацию, когда элемент виден пользователю на его экране (в видимом окне просмотра), вы можете использовать это для вызова функции и запуска анимации

    let calledStatus = 0; // some flag variable to remember if function is called
    window.onscroll  = function(){ 
        element =  document.querySelector( '.some element' );
        clientRect = element.getBoundingClientRect();

        if( clientRect.top < window.innerHeight && clientRect.top > ( clientRect.height * -1) && calledStatus == 0){
            //call your function or do other stuff
            console.log('called' )
              calledStatus = 1;

        }
    }

Answer 5

Используя jquery, сначала добавьте этот ссылочный скрипт над вашим js кодом или ссылочным скриптом

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></scrip>
....
</head>

, если вы хотите, чтобы код запускался специально после 472 px:

js

$(document).ready(function () {
Let initialScroll = true;
//you can decrease or increase 472 depending on where exactly 
//you want your function to be called 

    $(document).scroll(function () {

        if (($(document).scrollTop() > 472)&& initialScroll) {
           //call your function here
            console.log( "reached 472")
InitialScroll=false;
        }
    });
});

если вы хотите, чтобы ваша функция запускалась после достижения середины документа, вы помещаете div, где середина кода html:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    ...
<div id="middle"></div>
...
</body>
</html>

js

$(document).ready(function () {
Let initialScroll=true
    $(document).scroll(function () {

        if (($(document).scrollTop() >=$('#middle').position().top)&&initialScroll) {
           //call your function here
            console.log( "reached middle")
InitialScroll=false;
        }
    });
});