Горизонтальная прокрутка с использованием ScrollMagic и GSAP - PullRequest
Новая
       20

Горизонтальная прокрутка с использованием ScrollMagic и GSAP

0 голосов
/ 27 августа 2018

У меня серьезные проблемы с правильной работой горизонтальной прокрутки. Вы можете увидеть усилия на http://kodo.house/pr/ (прокрутите вниз, чтобы увидеть горизонтальное - их несколько, те с плитками работают хуже). Вы можете видеть, что при переключении с нормального на горизонтальное положение всегда есть скачок. Есть идеи как с этим бороться? Я буду очень признателен за любую помощь, спасибо!

Это код, надеюсь, вы поняли, как он работает: 

function initScroll(horizontal) {
    var $this = horizontal;
    var $thisId = $this.attr('id');

    $items = $this.find('.horizontal__item');
    var containerWidth = $items.outerWidth(true) * $items.length;
    $this.find('.horizontal__list').css({'min-width' : containerWidth, 'width' : containerWidth});

    var contentsWidth = $this.find('.js-horizontal-list').width()
                  - $this.find('.horizontal__heading').width()
                  - parseInt($this.find('.js-horizontal-container').css('padding-left'));

    if ((contentsWidth - 180) > 0) {
        var thisTween = new TimelineMax()
        .fromTo('#' + $thisId + ' .js-horizontal-container', 1, {x:  '0%'}, {x: -contentsWidth, ease: Linear.easeInOut});  // in from right

        thisScene = new ScrollMagic.Scene({
            triggerElement: '#' + $thisId,
           triggerHook: 'onLeave',
           duration: contentsWidth * 2
        })
        .setPin('#' + $thisId)
        .setTween(thisTween)
        .addTo(controller);
    } else {
        var paddingLeft = 
$this.find('.horizontal__container').css('padding-left');
        $this.find('.horizontal__container').css('padding-right', paddingLeft);
    }
    $this.find('.horizontal__list').addClass('horizontal__list--init');
}

1 Ответ

0 голосов
/ 06 февраля 2019

Сделано это перо на эффект горизонтальной прокрутки https://codepen.io/gulnoor1/pen/xmPywb надеюсь, что это все еще помогает. Вот JS от этого 

var controller = new ScrollMagic.Controller();

var tl = new TimelineMax();

var elementWidth = document.getElementById('container').offsetWidth;

var width = window.innerWidth - elementWidth;

var duration = elementWidth / window.innerHeight * 100;

var official = duration + '%';

tl
.to('.container', 5, {x: width, ease: Power0.easeNone});

var scene1 = new ScrollMagic.Scene({
    triggerElement: '.container',
    triggerHook: 0,
    duration: official
})
.setPin('.container')
.setTween(tl)
.addTo(controller);

console.log(elementWidth);
...