Как реализовать анимацию при скроллинге?

Question

[HasBenBlahBlag]

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

Comments

[HasBenBlahBlag]

Уточнение. Мне нужно так: прокрутил чуть прокрутку чуть увеличил прозрачность еще чуть прокрутил еще чуть увеличил, чуть назад прокрутил чуть уменьшилась прозрачность. Теперь понятно?

[HasBenBlahBlag]

нашел это darsa.in/sly/examples/parallax.html

Answer 1

[Сергей Протько]

var el = $('.your-element'),
      pageHeight = document.documentElement.scrollHeight,
      viewportHeight = document.documentElement.clientHeight;

$(window).on('scroll', function (e) {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // станет полностью видимым только когда прокрутят до конца
    // если нужно наоборот, то просто инвертируем (1-результат того что есть)
    // если нужно только в пределах какой-то облости - у вас все дано, 
    // нужно только посчитать
    el.css('opacity', (scrollTop+viewportHeight) / pageHeight )
})

Answer 2

[Илья Сидоренко]

if ( $(this).scrollTop() > 900 ) {             
      $('.class').css({'opacity', '1'});

Прямо сейчас кодил это))

Comments

[HasBenBlahBlag]

@iskros Уточнение. Мне нужно так: прокрутил чуть прокрутку чуть увеличил прозрачность еще чуть прокрутил еще чуть увеличил, чуть назад прокрутил чуть уменьшилась прозрачность. Теперь понятно?

[Сергей Протько]

@HasBenBlahBlag, предложенное мною решение именно так и делает. Для изменения поведения (насколько уменьшать увеличивать) читайне комментарии.

Answer 3

[Игорь Воротнёв]

Делал когда-то вот тут. Там вообще к скроллу привязано куча анимаций. Исходник js открыт, можно смотреть.

Answer 4

[av_tyschenko]

Вы ищите вот это https://github.com/matthieua/WOW