Выполнение скрипта при прокрутке до нужного места

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

Ниже можно посмотреть пример, где при прокрутке до определенного абзаца появится окошко и сам абзац поменяет фон и цвет шрифта.

Делается такая задержка выполнения скрипта с помощью плагинаjQuery Viewport Checker. Для его работы понадобится, так же, подключить библиотеку jQuery. Думаю объяснять что это и с чем его едят не нужно. Ну, а вдруг нужно, то статья - Как и где подключить скрипт? вам в помощь. Сама библиотека, если не подключена ранее на вашем сайте.

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

Далее подключаем сам плагин Viewport Checker. Его можно скачать по ссылке в начале статьи. Далее заливаете его себе на сайт и подключаете указав правильный путь к нему

<script src="js/viewportChecker.js"></script>

Дальше прописываем запуск нашего плагина и параметры при которых будет выполнятся запуск. Попросту добавляем вот такой код.

jQuery(function($){
$("#viewport").viewportChecker({
callbackFunction:function(){
//ТУТ скрипт или настройка
}
});
});

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

Во второй строке указываем айди блока, до которого выполнение вашего скрипта, показ блока и тд. не будет выполнятся. В нашем случаи это #viewport. Дальше, там где строка - //ТУТ скрипт или настройка, вы должны прописать то что вам нужно. Например в примере выше, я просто прописал появление окошка, которое скрыто. Написал вот такую строку.

$("#vc_pop").show();

Просто беру блок с айди vc_pop и показываю его. ранее в стилях этому блоку я прописал display:none;

Так же, я сделал добавление класса для блока с айди viewport. Этот класс имеет определенные стили, и при прокрутке, один обычный абзац в видимой части экрана станет с красным фоном, например.

$("#viewport").addClass('red');

Как видите, добавили класс red. Ему в стилях присваиваются стили и тд. В итоге у меня был готовый код таким:

jQuery(function($){
$("#vc_pop").hide();
$("#viewport").viewportChecker({
callbackFunction:function(){
$("#vc_pop").show();
$("#viewport").addClass('red');
}
});
});

Вы можете указывать свои параметры или свои скрипты, соблюдая правила синтаксиса. По этому принципу действует и анимация при прокрутке страницы, о которой писал в статье - Анимация элементов страницы при прокрутке.

Лично я, часто пользуюсь данным методом, как и писал в начале, в основном при верстке лендингов. Данная статья будет полезной для тех, кто не первый день имеет дело с версткой.

На этом все, спасибо за внимание. 🙂