Question

也许有人有时间检查和更正脚本 - codepen.io

这里有一个小问题，滚动不正确，滚动方向改变（从水平滚动到垂直滚动，反之亦然）。

有两个问题：

滚动中存在一个错误（据我所知，这是因为垂直块需要高度，例如水平）。

“联系人块”的最后一部分无法滚动到其全宽也许我们可以以不同的方式使用混合（水平/垂直）滚动部分来执行此任务？

$(function() {

var width_1 = $('.horizontal-scroll .main-section').width() + $('.horizontal-scroll .about-section').width() + $('.horizontal-scroll .main-services-section').width();

var height_1 = $('.vertical-scroll .services-section').height();

var width_2 = $('.horizontal-scroll .team-section').width() + $('.horizontal-scroll .contact-section').width();


var controller_1 = new ScrollMagic.Controller();

var horizontal_1 = new TimelineMax()
    .fromTo(".horizontal-scroll .about-section", 1, {
        x: "100%"
    }, {
        x: "0%",
        ease: Linear.easeNone
    })
    .fromTo(".horizontal-scroll .main-services-section", 1, {
        x: "100%"
    }, {
        x: "0%",
        ease: Linear.easeNone
    });

new ScrollMagic.Scene({
        triggerElement: "#horizontal-1",
        triggerHook: "onLeave",
        duration: width_1,
    })
    .addIndicators()
    .setPin("#horizontal-1")
    .setTween(horizontal_1)
    .addTo(controller_1);


var vertical_1 = new TimelineMax()
    .fromTo(".vertical-scroll .services-section", 1, {
        y: "100%"
    }, {
        y: "0%",
        ease: Linear.easeNone
    });

new ScrollMagic.Scene({
        triggerElement: "#vertical-1",
        triggerHook: "onLeave",
        duration: "100%",
    })
    .addIndicators()
    .setPin("#vertical-1")
    .setTween(vertical_1)
    .addTo(controller_1);


var horizontal_2 = new TimelineMax()
    .fromTo(".horizontal-scroll .team-section", 1, {
        x: "100%"
    }, {
        x: "0%",
        ease: Linear.easeNone
    })
    .fromTo(".horizontal-scroll .contact-section", 1, {
        x: "100%"
    }, {
        x: "0%",
        ease: Linear.easeNone
    });

new ScrollMagic.Scene({
        triggerElement: "#horizontal-2",
        triggerHook: "onLeave",
        duration: width_2,
    })
    .addIndicators()
    .setPin("#horizontal-2")
    .setTween(horizontal_2)
    .addTo(controller_1); });

如何在滚动过程中从水平滚动切换到垂直滚动，反之亦然？

0 个答案: