Я хочу показать эффект затухания, как только элемент появится на экране. Существует много контента перед этим элементом, поэтому, если я запускаю efect на document.ready, при определенных разрешениях vistors его не видят.
Возможно ли инициировать событие, когда после прокрутки элемент становится видимым? Я почти уверен, что раньше видел этот эффект, но понятия не имею, как его достичь.
Спасибо!
Плагин jQuery Waypoints может быть полезен. Он обеспечивает способ запуска действия, когда элемент становится видимым на экране.
Например:
$('.entry').waypoint(function() {
alert('The element has appeared on the screen.');
});
Ниже приведены примеры сайта плагина.
Это лучше для меня, чем других в этом посте: http://www.teamdf.com/web/jquery-element-onscreen-visibility/194/
Использование прост:
$('#element').visible()
Вы можете увидеть, как этот плагин используется для создания вашего эффекта здесь:
http://css-tricks.com/slide-in-as-you-scroll-down-boxes/
function viewable() {
$(".module").each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-in");
});
}
$(window).scroll(function() {
viewable();
});
$(window).blur(function() {
viewable();
});
Если вы используете вкладки. (например, вкладки jQuery UI), вы должны проверить, активна ли табло.
$(window).scroll(function() {
if($('#tab-1').hasClass('active')) {
viewable();
}
});
Jquery.appear plugin - лучший способ решить эту проблему.
демо.
Быстрый поиск показал это viewport расширение для jQuery, которое позволит вам проверить видимость элемента в окне просмотра. Если ваш элемент не находится в окне просмотра, не делайте анимацию с постепенным увеличением.
Я думаю, вы имеете в виду плагин jQuery "Lazy Load": http://www.appelsiini.net/2007/9/lazy-load-images-jquery-plugin
От взгляда на исходный код, похоже, что плагин делает что-то вроде этого:
$('#item').one('appear', function () {
// Do stuff here
});