Когда появляется DIV, добавьте класс

Я хотел бы добавить класс к элементу, например, DIV, а также к img, h1 и т. Д., Когда он входит в область просмотра, когда пользователь прокручивает.Когда появляется DIV, добавьте класс

Как рассчитать, находится ли мой элемент в окне просмотра или нет?

В псевдо: Если #swing вошел в окно просмотра, добавьте анимированный bounceOutLeft 'классов (играйте в анимацию с помощью CSS3). Когда анимация завершена, удалите анимированный bounceOutLeft.

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

$('#star').addClass('animated bounceOutLeft');

PROGRESS EDIT

Благодаря @Bibhas Пытаюсь реализуйте это OnScreen plugin, которое, я думаю, я сделал, потому что инструменты Dev говорят, что имена классов есть, но эти имена классов - это css3-переходы, которые они просто не играют, что может быть проблемой?

$(function() { 
    setInterval(function() { 
    $("#star")        // get all <h2>s 
     .filter(":onScreen")    // get only <h2>s on screen 
     .addClass('animated bounceOutLeft'); 
    }, 1000)        // repeat every second 
})

источник

2013-02-20 egr103

http://www.whathaveyoutried.com –

@ egr103 Проверьте использование здесь - https://github.com/benpickles/onScreen. Вы должны поместить его в 'setInterval'. –

@Bibhas Спасибо. У меня есть имена классов, которые добавляются в соответствии с DevTools, но мои анимации, похоже, не будут воспроизводиться. Любая идея, почему это будет так? Обновлен код/вопрос. – egr103

Видимо, кто-то написал для него небольшой плагин jQuery. От его кода -

function isOnScreena(elem) { 
    var $window = $(window) 
    var viewport_top = $window.scrollTop() 
    var viewport_height = $window.height() 
    var viewport_bottom = viewport_top + viewport_height 
    var $elem = $(elem) 
    var top = $elem.offset().top 
    var height = $elem.height() 
    var bottom = top + height 

    return (top >= viewport_top && top < viewport_bottom) || 
      (bottom > viewport_top && bottom <= viewport_bottom) || 
      (height > viewport_height && top <= viewport_top && bottom >= viewport_bottom) 
}

Исходный код - едва ли 20 строк. Вы можете читать и учиться. - https://github.com/benpickles/onScreen

источник

2013-02-20 18:03:16

Это лучше подходит для комментариев, а не для ответа. –

Пожалуйста, объясните почему. –

Потому что ОП запросил решение для кодирования - не плагин. SO - это вопрос и ответы на вопросы по кодированию. Посмотрите на вопрос, который спросил OP: «Как я ...?» –

Функция getBoundingClientRect() может помочь здесь. Here's a CodePen I did:

$(window).on('load resize scroll',function(e){ 
    $('h2').each(function(index) { 
     var h2Height = parseInt($(this)[0].getBoundingClientRect().height); 
     var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); 
     // This will return true as soon as the heading crosses the bottom of the viewport 
     if ($(this)[0].getBoundingClientRect().top < (viewHeight - h2Height)) { 
      $('h2').eq(index).addClass('added-class'); 
     } 
    }); 
});

Edit: отметить, что это предполагает, что браузер работает в стандартном режиме.

Edit2: В соответствии с предложением @brandnewjames, я добавил некоторые другие обработчик события в on(), который будет также учитывать для действий за пределами только прокрутку.

источник

2016-07-13 16:42:00

Когда появляется DIV, добавьте класс

ответ

Смежные вопросы