如何解决如何在滚动过程中从水平滚动切换到垂直滚动,反之亦然?
也许有人有时间检查和更正脚本 - 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",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",{ y: "100%" },{ y: "0%",ease: Linear.easeNone }); new ScrollMagic.Scene({ triggerElement: "#vertical-1",duration: "100%",}) .addindicators() .setPin("#vertical-1") .setTween(vertical_1) .addTo(controller_1); var horizontal_2 = new TimelineMax() .fromTo(".horizontal-scroll .team-section",ease: Linear.easeNone }) .fromTo(".horizontal-scroll .contact-section",ease: Linear.easeNone }); new ScrollMagic.Scene({ triggerElement: "#horizontal-2",duration: width_2,}) .addindicators() .setPin("#horizontal-2") .setTween(horizontal_2) .addTo(controller_1); });
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。