Часто вижу на сайтах (и ваших тоже) такое что докручиваешь до определенного места и элемент мигать начинает.
Вы это вроде на JS делаете. На какое событие прописывать действие по добавлению класса к элементу? Можете ссылку на документацию дать.
Часто вижу на сайтах (и ваших тоже) такое что докручиваешь до определенного места и элемент мигать начинает.
Вы это вроде на JS делаете. На какое событие прописывать действие по добавлению класса к элементу? Можете ссылку на документацию дать.
Комментарии
См. Waypoints. Это скриптец такой есть. Довольно просто подключается, но вроде и модуль такой есть.
Я использую модуль Animate CSS для анимации и библиотеку Viewportchecker для событий прокрутки. Подробнее тут
Да, действительно это нужно для Animate.css но я его руками, а не модулем подключаю.
C Waypoints работал. Если есть еще варианты - пожалуйста.
За модуль спасибо, посмотрю.
В jQuery скрипте по событию scroll смотреть попал ли элемент в видимую область и производить нужные действия, не забыть повесится на resize и load(window)
С Waypoints или без?
if (myElement.offset().top <= botWinY) {
....
}
А какая разница между:
https://www.drupal.org/project/viewportchecker
и
https://www.drupal.org/project/waypoints
Это модули подключающие разные библиотеки для одного и того же?
Первый - это мой модуль для подключения одноимённой библиотеки. Второй подключает другую, но по описанию похоже, что делают они одно и тоже: определяют момент, когда пользователь скроллит до нужного элемента
С обеими библиотеками тут кто-то работал? Принципиальная разница есть?
Я выбрал Viewportchecker, потому что именно эту библиотеку рекомендовали использовать в связке с библиотекой Animate CSS
Пример. На сайте есть клетки (.muvik.scroll). Они должны анимироваться, когда докручиваешь (сверху или снизу) до начала их области (#kletki_place).
Через Waypoints так (работает):
$( "#kletki_place" ).waypoint(function() {
$( ".muvik.scroll" ).addClass( "zoomIn animated" );
});
}
Усложняю здачу. Пусть событие срабатывает, когда докручиваешь чуть выше #kletki_place на 70px
$( "#kletki_place" ).waypoint(function() {
$( ".muvik.scroll" ).addClass( "zoomIn animated" );
},{offset:'70'}); /*-70 тоже пробовал*/
}
Т.обр. событие срабатывает в разных местах в зависимости если крутишь сверху или снизу.
$('#kletki_place').offset().top-70;
Adano, как это сюда поставить?
$( ".muvik.scroll" ).addClass( "zoomIn animated" );
});
handler: function() {$( ".muvik.scroll" ).addClass( "zoomIn animated" ); },
offset: 70
});
ХулиGUN, не работает. Думаешь, должно?
Если через Viewportchecker, тогда как? Тут читал:
http://www.web2feel.com/tutorial-for-animated-scroll-loading-effects-wit...
classToAdd: 'visible animated fadeIn',
offset: 100
});
но:
1) класс добавляется, когда элемент появляется внизу экрана. Мне нравится вверху.
2) не рассматривается ситуация, когда появляется один элемент, а класс нужно добавить другому..
Я брал с документации к плагину... что друпал с ним делает, я хз
Читал я документацию. Может я чего-то не учел, может Друпал такой сякой (что врядли). Кстати про offset на разных форумах видел. Так что не у одного меня не получилось.
Проблему я типа решил поставив невидимый div на 70px выше рассматриваемой области. И к нему привязал waypoint.
А как через Viewportchecker, вопрос остается.
Я с Viewportchecker работал так:
classToAdd: 'animated fadeInLeft'
});
где #logo - это ID или класс нужного элемента, а в classToAdd, как ты понял, прописываешь классы, которые нужно добавить, когда пользователь доскроллит до элемента. Всё просто как 5 копеек. Больше опций тут
Да, все просто. Повторюсь:
1) класс добавляется, когда элемент появляется внизу экрана. Мне нравится вверху.
2) не рассматривается ситуация, когда появляется один элемент, а класс нужно добавить другому..
"Тут" читал. Может не допер чего-то.
1) Параметр offset пробовал? В процентном соотношении пробовал задавать?
2) Попробуй добавить callback функцию, а в ней добавлять класс нужному элементу уже через .addClass
То есть получается что то вроде
classToAdd: 'visible animated fadeIn',
offset: 100,
callbackFunction: function (el, action) {
if (action === 'add') { // Если класс добавлен
// тут добавляешь класс другому элементу
} else {
// убираешь
}
}
});
Непонятно только зачем тебе триггерить другие элементы. Они ж по идее должны быть внутри контейнера, к которому ты скроллишься. Думаю для анимациив цсс достаточно правильно составить каскад. Типа
.parent.scrolled .children {opacity: 1}
Увы, не суждено мне это постичь. Пока waypoint-ми обошелся. Всем спасибо!