элемент translate / tween, если это возможно, между двумя классами, как пользовательские прокрутки

0

Я пытаюсь перевести элемент как пользовательский свиток.

Если возможно, классу прокручивать вверх и из класса прокручивать вниз.

Я думаю, что это возможно, так как волшебная палочка делает это в прокрутке вниз в этой демонстрации: http://janpaepke.github.io/ScrollMagic/

Однако я не могу понять, как использовать этот скрипт (https://github.com/janpaepke/ScrollMagic)

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

$(window).scroll(function(){
    var scrollTop = $(this).scrollTop();
    if(scrollTop>lScrollTop){
        //scroll up
    }
    else{
        //scroll down
    }
    lScrollTop = scrollTop;
});
  • 0
    Вы сделали бы это как часть объекта TweenMax ...
  • 0
    @brbcoding Да, но вы можете показать мне, как это сделать. Я попытался сделать это сам, и я получаю сообщение об ошибке не определены.
Теги:
scrollmagic

1 ответ

1
Лучший ответ

DEMO

var controller = new ScrollMagic(); 

var scene = new ScrollScene(offset: 1000).setTween( new TweenMax.to('#foo', 2, { css: { transform: 'translate3d(500px, 0, 0)' }}))
    .addTo(controller);

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

Обновлено демо и код...

var controller = new ScrollMagic();

var scene = new ScrollScene({ offset: 1000}).setTween( new TweenMax.to('#foo', 2, { css: { top: 150 } }), 1000)
    .addTo(controller);
Поделиться
  • 0
    var controller = new ScrollMagic(); var scene = new ScrollScene({ offset: 1000}).setTween( new TweenMax.to('#foo', 2, { css: { top: '32px' } }), 1000).addTo(controller) - это то, что я есть, но это оживляет, когда scrollTop достигает 1000. Я хочу, чтобы он двигался, когда полоса прокрутки движется, пока не достигнет стиля (32px).
  • 0
    Ничего не происходит: jsfiddle.net/rYh7J/9
Показать ещё 11 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню