JS创建运动景观

Question

测试前端以创建自己的交互式产品组合网站：marcelmp.x10host.com。

我正在尝试创建自己的故事，其中的景观包括建筑物和固定在集装箱上的动车，所有这些动作均基于滚动位置。我正在使用香草JS，JQuery，GSAP和ScrollMagic。

那么，如果我是中低级程序员，那么您将如何解决这个问题？

谢谢。

Answer 1

我认为在当今开发任何东西，特别是“酷设计APP”时，都应该考虑使用“移动优先”方法。

另外，您可能希望在某个在线代码编辑器中进行开发，以便您可以共享并征求人们的意见或帮助解决单个问题。

以下是您的作品嵌入片段的LIVE示例。

欢迎您清理Snipped，然后更正您的问题，并适当引用您尝试过或可能失败的代码，或寻求其他意见。

$('body').css({'overflow':'hidden'});
$(document).bind('scroll',function () {
    window.scrollTo(0,0);
});

//Controller Init
    var controller = new ScrollMagic.Controller();


//Var declaration
    const vw = window.innerWidth;
    //const vh = window.innerHeight;

    const menu = document.querySelector('#menu');
    const hello = document.querySelector('#hello');
    const mouse = document.getElementsByClassName('mouse');
    const about = document.querySelector('#about');

    const deskItems = document.getElementsByClassName('desk-items');
    const deskImac = document.querySelector('#deskImac');
    const deskKeyboard = document.querySelector('#deskKeyboard');
    const deskMouse = document.querySelector('#deskMouse');
    const deskBook = document.querySelector('#deskBook');
    const deskPen = document.querySelector('#deskPen');
    const deskPhone = document.querySelector('#deskPhone');
    const deskCoffee = document.querySelector('#deskCoffee');

    const story = document.querySelector('#story');
    const roadItems = document.getElementsByClassName('road-items');
    const roadSky = document.querySelector('#road_sky');

    let roadSkyWidth = roadSky.offsetWidth;


//Initial Animation
    TweenMax.set(about, {autoAlpha: 0});
    TweenMax.set(deskItems, {autoAlpha: 0});
    TweenMax.set(hello, {opacity:0});


//Timelines

    var menu_tween = new TimelineMax();
    menu_tween.to(hello, 2, {xPercent: -20, yPercent: 50, scale: 0.94})
        .to(about, 2, {autoAlpha: 1})
        .fromTo(deskImac, 2, {xPercent: 140, yPercent: -100, rotation: -7}, {
            xPercent: 162,
            yPercent: -10,
            rotation: 11,
            ease: Power1.easeOut,
            autoAlpha: 1
        }, "-=1.6")
        .fromTo(deskKeyboard, 2, {xPercent: 0, yPercent: -100, rotation: -15}, {
            xPercent: 128,
            yPercent: 38,
            rotation: 4,
            ease: Power3.easeOut,
            autoAlpha: 1
        }, "-=1.4")
        .fromTo(deskMouse, 2, {xPercent: 260, yPercent: -100, rotation: 0}, {
            xPercent: 195,
            yPercent: 68,
            rotation: 20,
            ease: Power3.easeOut,
            autoAlpha: 1
        }, "-=1.5")
        .fromTo(deskBook, 1.5, {xPercent: 20, yPercent: -100, rotation: 0}, {
            xPercent: 32,
            yPercent: -10,
            rotation: -6,
            ease: Power1.easeOut,
            autoAlpha: 1
        }, "-=2.2")
        .fromTo(deskPen, 1.5, {xPercent: 50, yPercent: -100, rotation: 199}, {
            xPercent: 34,
            yPercent: -16,
            rotation: 192,
            ease: Power2.easeOut,
            autoAlpha: 1
        }, "-=1.8")
        .fromTo(deskPhone, 1.5, {xPercent: 280, yPercent: 24, rotation: 0}, {
            xPercent: 230,
            yPercent: 32,
            rotation: -9,
            ease: Power3.easeOut,
            autoAlpha: 1
        }, "-=1.4")
        .fromTo(deskCoffee, 1.5, {xPercent: 75, yPercent: -100, rotation: -12}, {
            xPercent: 87,
            yPercent: -2,
            rotation: 4,
            ease: Power2.easeOut,
            autoAlpha: 1
        }, "-=1.3")
        .to(menu, 0.8, {delay: 0.8});

    var story_tween = new TimelineMax();
    story_tween.to(roadSky, 5, {
        ease: Linear.easeNone,
        x: "-="+vw,
        modifiers: {
            x: function(x) {
                return x % roadSkyWidth;
            }
        },
        repeat: -1
    });

//Movement for Animations
    var sub_tween = TweenMax.to(mouse, 0.5, {yPercent:-25, autoAlpha: 0, opacity:0});

    $( document ).ready(function() {
        $(".preloader").fadeOut('slow', function() {
            //Animation Init
            TweenMax.to(hello, 3, {opacity: 1});
            TweenMax.to(mouse, 1.6, {yPercent: -50, opacity: 1, delay: 0.5, autoAlpha:1});
            $(document).unbind('scroll');
            $('body').css({'overflow':'visible'});
        });
    });

//Scrolling Animation
    new ScrollMagic.Scene({offset: 1, duration: 850, reverse: true})
        .setPin(menu, {pushFollowers: false})
        .setTween(menu_tween)
        .addIndicators({name: "Menu"})
        .addTo(controller);

    new ScrollMagic.Scene({offset: 1, duration: 50})
        .setTween(sub_tween)
        .addIndicators({name: "Sub tween"})
        .addTo(controller);

    new ScrollMagic.Scene({offset:1600, duration: 500})
        .setPin(story, {pushFollowers: false})
        .setTween(story_tween)
        .addIndicators({name: "Story"})
        .addTo(controller);

import url('//fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');

html, body {
    background-color: #2196F3;  
    height: 100%;
}

.mouse { 
    /* Hide mouse */
    opacity: 0;
}

.preloader * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}

.preloader {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-color: #2196F3;
    background-position: center;
}

#menu, #card {
    width: 100%;
    height: 200vh;
    top: 0;
    left: 0;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;

}

#menu h1 {
    text-align: center;
    color: white;
    font-family: roboto, sans-serif;
    font-weight: 900;
    font-size: 8.3vw;
    margin: 15% 0 0 0;
    padding: 0;
}

#menu h2 {
    text-align: center;
    color: #E3F2FD;
    font-family: roboto, sans-serif;
    font-weight: 300;
    font-size: 1.1vw;
    margin: 0;
    padding: 0;
}

#menu h3 {
    margin: 20px 21vw;
    padding: 0;
    color: white;
    font-family: roboto, sans-serif;
    font-weight: 100;
    font-size: 1.85vw;
}

#hello, #sub, #about {
    position: relative;
}

.mouse {
    opacity: 0;
    position: fixed;
    width: 22px;
    height: 42px;
    bottom: 5%;
    left: 50%;
    margin-left: -12px;
    border-radius: 15px;
    border: 2px solid white;
}
.scroll {
    display: block;
    width: 3px;
    height: 3px;
    margin: 6px auto;
    border-radius: 4px;
    background: white;
    -webkit-animation: finger 1s infinite;
    animation: finger 1s infinite;
}

@-webkit-keyframes finger {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
}
@keyframes finger {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
}

.desk-items {
    width: 30%;
    height: 30%;
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
}

#deskBook {
    width: 25%;
    height: 25%;
}

#road_trip {
    display: flex;
    position:relative;
    margin-left: auto;
    margin-right: auto;
    width: 80vw;
    height: 50vh;
    background: white repeat-x;
    border: 5px solid black;
    border-radius: 10vh;
    overflow: hidden;
}

#road_sky {
    top: 0;
    left: -1%;
    height: 100%;
    width: 400vw;
    background: url("Assets/road_sky.svg") repeat-x;
    background-size: contain;
    position: absolute;
}

<script
        src="http://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/jquery.ScrollMagic.js"></script>

<div class="preloader"></div>


<section id="menu">

    <div id="hello">
        <h1>hello</h1>
    </div>

    <br>

    <div id="sub">
        <div class="mouse">
            <div class="scroll"></div>
        </div>
    </div>

    <br>

    <div id="about">
        <h3>I'm Marcel Miró,<br>a self-taught Front End Developer,<br>student and tech enthusiast.</h3>
    </div>

    <div id="desk">
        <img class="desk-items" id="deskImac" src="//marcelmp.x10host.com/Assets/iMac.svg">
        <img class="desk-items" id="deskKeyboard" src="//marcelmp.x10host.com/Assets/keyboard.svg">
        <img class="desk-items" id="deskMouse" src="//marcelmp.x10host.com/Assets/mouse.svg">
        <img class="desk-items" id="deskBook" src="//marcelmp.x10host.com/Assets/moleskine.svg">
        <img class="desk-items" id="deskPen" src="//marcelmp.x10host.com/Assets/pencil.svg">
        <img class="desk-items" id="deskPhone" src="//marcelmp.x10host.com/Assets/iPhone.svg">
        <img class="desk-items" id="deskCoffee" src="//marcelmp.x10host.com/Assets/coffee.svg">
    </div>

</section>


<section id="story">
    <div id="road_trip">
        <div class="road-items" id="road_sky"></div>
        <!--<img class="road-items" id="buildings" src="//marcelmp.x10host.com/Assets/buildings.svg">
        <img class="road-items" id="car" src="//marcelmp.x10host.com/Assets/car.svg">-->

    </div>

<div id="road"></div>


<div style="height:200vh;"></div>

</section>