Как добиться эффекта параллакса с помощью Greensock? - PullRequest
Новая
       89

Как добиться эффекта параллакса с помощью Greensock?

0 голосов
/ 23 сентября 2018

Достижение

Я видел эту плавную параллаксную анимацию видео героя на Antoni.de .Я заметил две вещи здесь.Во-первых, прокрутка сглажена, а во-вторых, в заголовке видео есть эффект параллакса.Я хотел бы добиться этих эффектов.

Мой код Я придумал следующее: 

$(window).scroll(function() {
            var scrollPos = $(this).scrollTop();
            console.log(scrollPos);

            root.parallaxBackground(scrollPos);
        });
parallaxBackground: function(scrollPos) {

    // Development
    console.log('init parallaxBackground');

    // Still need work
    var background = $('.hero').find('.background');
    var simpleParallax = -.15;

    if (scrollPos > 0) {
        // Do the magic
        TweenMax.set(background, {
            x: 0, 
            y: -(scrollPos * simpleParallax)
        });
    }

}

Проблемы

Над кодом работает, но когда я перехожу на быстрый,background div застрянет на определенном количестве пикселей при прокрутке до самого верха.ScrollPos должен быть равен нулю, поэтому и для параллакса тоже.

Вопрос в том, что я делаю неправильно или отсутствует, и что мне не хватает, чтобы получить плавную прокрутку в моем эксперименте?

Если есть какие-либовопросы остались или что-то, дайте мне знать!

1 Ответ

0 голосов
/ 27 сентября 2018

Ваша проблема в том, что при слишком быстрой прокрутке ваша переменная scrollPos будет перепрыгивать, скажем, с 300 на 0, поэтому код в вашем условии if не будет запущен.Что вам нужно сделать, это установить scrollTop в 0, когда это произойдет.

Примерно так будет работать: 

parallaxBackground: function(scrollPos) {

// Development
console.log('init parallaxBackground');

// Still need work
var background = $('.hero').find('.background');
var simpleParallax = -.15;
var pos = scrollPos;
if(scrollPos <= 0) pos = 0;
// Do the magic
TweenMax.set(background, {
    x: 0, 
    y: -(pos * simpleParallax)
});

}
...