Как сделать этот триггер анимации для прокрутки?

У меня есть эта рабочий JS скрипка: http://jsfiddle.net/4v2wK/Как сделать этот триггер анимации для прокрутки?

// Animate the element's value from x to y: 
$({someValue: 40000}).animate({someValue: 45000}, { 
    duration: 3000, 
    easing:'swing', // can be anything 
    step: function() { // called on every step 
     // Update the element's text with rounded-up value: 
     $('#el').text(commaSeparateNumber(Math.round(this.someValue))); 
    } 
}); 

function commaSeparateNumber(val){ 
    while (/(\d+)(\d{3})/.test(val.toString())){ 
     val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); 
    } 
    return val; 
}

Теперь я хочу изменить его так, что он срабатывает только когда пользователь прокручивает в DIV, не обязательно парит над ним, но ДИВ видна в его экран. Скажите, что этот div находится внизу длинной страницы, к тому времени, когда пользователь доберется туда, анимация закончилась, и они пропустили весь показ.

источник

2014-08-30 Natalia Rodríguez

вы можете использовать inview (https://github.com/protonet/jquery.inview) или написать что-то свое. проверить размер vieport, изменить его при изменении размера и проверить положение прокрутки, а затем вы знаете, находится ли элемент в поле зрения – caramba

, чтобы вы хотели, чтобы отсчет начинался после достижения пользователем цели (div)? или хотите, чтобы счетчик начинал и заканчивался, как только пользователь достиг цели? – ProllyGeek

Я бы хотел, чтобы это началось, когда они добрались туда, окончание не имеет значения, но начало. Спасибо! –

Этот код вызовет анимацию после 250px над верхней частью вашего div.

isScrolledIntoView(); 
$(window).scroll(function() { 
    isScrolledIntoView(); 
}); 
function isScrolledIntoView(){ 
    $('.class').each(function(){ // add the class of the divs you want trigger on scroll over 
     var $this = $(this).attr("id"); 
     var docViewTop = $(window).scrollTop(); 
     var docViewBottom = docViewTop + $(window).height(); 

     var elemTop = $(this).offset().top; 
     var elemBottom = elemTop + $(this).height(); 

     if ((elemTop >= docViewTop) && (((docViewBottom-250) >= elemTop))){ 
      // trigger your animation here 
      // with $this as a selector 
     } 
    })

источник

2014-10-25 16:44:49 user3674465

Как сделать этот триггер анимации для прокрутки?

ответ

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