Как присвоить класс элементу, когда элемент появляется на экране.

Главные вкладки

Аватар пользователя VasyOK VasyOK 21 января 2018 в 21:28

Часто вижу на сайтах (и ваших тоже) такое что докручиваешь до определенного места и элемент мигать начинает.

Вы это вроде на JS делаете. На какое событие прописывать действие по добавлению класса к элементу? Можете ссылку на документацию дать.

Комментарии

Аватар пользователя VasyOK VasyOK 21 января 2018 в 23:54

Да, действительно это нужно для Animate.css но я его руками, а не модулем подключаю.

C Waypoints работал. Если есть еще варианты - пожалуйста.

За модуль спасибо, посмотрю.

Аватар пользователя sas@drupal.org sas@drupal.org 22 января 2018 в 11:43

В jQuery скрипте по событию scroll смотреть попал ли элемент в видимую область и производить нужные действия, не забыть повесится на resize и load(window)

Аватар пользователя VasyOK VasyOK 22 января 2018 в 12:44

<a href="mailto:sas@drupal.org">sas@drupal.org</a> wrote:

В jQuery скрипте по событию scroll смотреть попал ли элемент в видимую область

С Waypoints или без?

Аватар пользователя ivnish ivnish 1 февраля 2018 в 16:20

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

Аватар пользователя ivnish ivnish 1 февраля 2018 в 16:23

Я выбрал Viewportchecker, потому что именно эту библиотеку рекомендовали использовать в связке с библиотекой Animate CSS

Аватар пользователя VasyOK VasyOK 2 февраля 2018 в 16:15

Пример. На сайте есть клетки (.muvik.scroll). Они должны анимироваться, когда докручиваешь (сверху или снизу) до начала их области (#kletki_place).

Через Waypoints так (работает):

$(document).scroll(function(){
        $( "#kletki_place" ).waypoint(function() {            
            $( ".muvik.scroll" ).addClass( "zoomIn animated" );
        });
}

Усложняю здачу. Пусть событие срабатывает, когда докручиваешь чуть выше #kletki_place на 70px

$(document).scroll(function(){
        $( "#kletki_place" ).waypoint(function() {            
            $( ".muvik.scroll" ).addClass( "zoomIn animated" );
        },{offset:'70'}); /*-70 тоже пробовал*/
}

Т.обр. событие срабатывает в разных местах в зависимости если крутишь сверху или снизу.

Аватар пользователя VasyOK VasyOK 2 февраля 2018 в 23:44

ХулиGUN, не работает. Думаешь, должно?

Если через Viewportchecker, тогда как? Тут читал:
http://www.web2feel.com/tutorial-for-animated-scroll-loading-effects-wit...

jQuery('.post').addClass("hidden").viewportChecker({
        classToAdd: 'visible animated fadeIn',
        offset: 100
       });

но:
1) класс добавляется, когда элемент появляется внизу экрана. Мне нравится вверху.
2) не рассматривается ситуация, когда появляется один элемент, а класс нужно добавить другому..

Аватар пользователя VasyOK VasyOK 3 февраля 2018 в 3:00

Читал я документацию. Может я чего-то не учел, может Друпал такой сякой (что врядли). Кстати про offset на разных форумах видел. Так что не у одного меня не получилось.

Проблему я типа решил поставив невидимый div на 70px выше рассматриваемой области. И к нему привязал waypoint.

А как через Viewportchecker, вопрос остается.

Аватар пользователя ivnish ivnish 3 февраля 2018 в 8:47

Я с Viewportchecker работал так:

$('#logo').viewportChecker({
  classToAdd: 'animated fadeInLeft'
});

где #logo - это ID или класс нужного элемента, а в classToAdd, как ты понял, прописываешь классы, которые нужно добавить, когда пользователь доскроллит до элемента. Всё просто как 5 копеек. Больше опций тут

Аватар пользователя VasyOK VasyOK 3 февраля 2018 в 14:24

Да, все просто. Повторюсь:
1) класс добавляется, когда элемент появляется внизу экрана. Мне нравится вверху.
2) не рассматривается ситуация, когда появляется один элемент, а класс нужно добавить другому..
"Тут" читал. Может не допер чего-то.

Аватар пользователя ivnish ivnish 3 февраля 2018 в 15:23

1) Параметр offset пробовал? В процентном соотношении пробовал задавать?
2) Попробуй добавить callback функцию, а в ней добавлять класс нужному элементу уже через .addClass

Аватар пользователя ХулиGUN ХулиGUN 3 февраля 2018 в 16:40

VasyOK wrote:

"Тут" читал. Может не допер чего-то.

viewportChecker wrote:

callbackFunction: function(elem, action){}, // Callback to do after a class was added to an element. Action will return "add" or "remove", depending if the class was added or removed

То есть получается что то вроде

jQuery('.post').addClass("hidden").viewportChecker({
        classToAdd: 'visible animated fadeIn',
        offset: 100,
        callbackFunction: function (el, action) {
             if (action === 'add') { // Если класс добавлен
                  // тут добавляешь класс другому элементу
             } else {
                 // убираешь
             }
       }
       });

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

.parent .child {transition: .3s; opacity:0}
.parent.scrolled .children {opacity: 1}