Используйте ScrollMagic для определения направления прокрутки

Я хотел бы скрыть заголовок моего сайта, когда пользователи прокручивают страницу вниз (это просто сделать в ScrollMagic), но я не уверен, могу ли я также использовать ScrollMagic, чтобы определить, прокручивает ли пользователь, и если да чтобы снова показать заголовок.

Сложность заключается в том, что для начальной прокрутки я могу установить простое смещение для основной оболочки сайта, но для сколлупа, который может произойти в любой момент во время прокрутки страницы, я не уверен, как я могу использовать события ScrollMagic для этого?

Любая помощь приветствуется.

Дэн


scroll scrollmagic direction detect
person danjothebanjo    schedule 27.11.2015    source источник
comment
Теперь вы можете использовать официальный подключаемый модуль прокрутки GSAP, ScrollTrigger, вместо этого, у которого есть события, связанные с каждым направлением.   -  person Zach Saucier    schedule 19.06.2020

Ответы (3)


arrow_upward
6
arrow_downward

если вы используете ScrollMagic, вы можете проверить событие scrollDirection.

scene.on('enter',function(event){
     console.log(event.scrollDirection);
});

Это вернет «REVERSE» или «FORWARD», и на основании этого вы можете что-то запустить.

-ваше здоровье.

person Frederick Jaime    schedule 15.11.2016

arrow_upward
5
arrow_downward

Вы можете использовать .on("update", function() { … } в своей сцене.

Вот кое-что, что я только что сделал для новой страницы. Анимированный '#header' находится внутри другого DIV, который имеет position: fixed, в два раза выше '#header' и top: -80px;, поэтому header перемещается на 80 пикселей вверх или вниз (то есть в видимую область и из нее), в зависимости от направления прокрутки:

var controller = new ScrollMagic.Controller();

var i1 = 0; 
var i2 = 0; 

var scene = new ScrollMagic.Scene()
.addTo(controller)
.on("update", function() {
    var x1 = controller.info("scrollDirection");
    var x2 = $(window).scrollTop();
    var x3 = 400;
        if ( x1 == "REVERSE" && x2 >= x3 && i1 == 0) {
            TweenLite.fromTo("#header", 0.3, {top: "0px"}, {top: "80px", ease: Linear.easeNone});
            i1++;
            i2 = 0;
        }
        if ( x1 == "FORWARD" && x2 > x3 && i2 == 0) {
            TweenLite.fromTo("#header", 0.3, {position: "absolute", top: "80px"}, {top: "0px", ease: Linear.easeNone});
            i1 = 0;
            i2++;
        }       
});

i1 и i2 используются для фильтрации избыточных событий, чтобы избежать нескольких промежуточных кадров в одном направлении.

x3 определяет, как долго заголовок остается видимым вверху страницы.

person Johannes    schedule 05.12.2015

arrow_upward
-4
arrow_downward

Не используйте магию прокрутки для этого простого эффекта. Вы можете попробовать headroomjs.

person Nic    schedule 27.11.2015