在 scrollmagic 中，我如何固定场景，在该场景中制作动画，然后让下一个场景滚动到它上面？

Question

我已经在 ScrollMagic 中成功地固定了一个屏幕，并在场景上设置了一个遮罩以不透明度淡出。但是当下一个屏幕向上滚动时，场景不会保持固定状态。我想让第一个场景做它的动画并留在那里，然后第二个场景向上滚动到第一个场景上。有人知道我做错了什么吗？是因为我的紫色面具绝对定位了吗？

这个 jsfiddle 没有使用滚动的动画，但出于某种原因，它在我的本地计算机上运行。

https://jsfiddle.net/LNMSchneiderman/rsbw3vka/27/

jquery:

var height = $(window).height();

$(document).ready(function() {
    $('.mask, .load_p').delay( 1100 ).fadeOut(1000);

    var fadeUp01 = TweenMax.to('#purple-mask', 1.5, {opacity: .9}); //fade in timestamp1

    var scene = new ScrollMagic.Scene({
            triggerElement: "#screen1",
            duration: height, 
            triggerHook: 0, 
            reverse: true 
    })
    .setPin("#screen1", {pushFollowers: true})
    .setTween(fadeUp01)
    .addTo(controller);
});

html:

<div class="screen" id="screen1">
    <div id="purple-mask"></div>

    <div class="date">October 16, 1915</div>
    <hr/>
    <div class="title">Seven thousand march for "Votes for Women"</div>
    <div class="caption">About 7,000 people marched supporting women's right to vote. </div>
</div>

<div class="screen" id="screen2">
<h1>Getting women the vote</h1>
<div class="intro-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus, urna non bibendum imperdiet, turpis quam iaculis nibh, sit amet porttitor nisl metus eget augue. Phasellus bibendum, arcu a dignissim convallis, massa risus ultrices massa, dignissim aliquet quam nibh at eros. Sed congue mattis varius. Suspendisse ultrices non tellus in posuere. Morbi maximus a diam ac blandit. Pellentesque tristique ante id eleifend accumsan. Cras vitae aliquet orci. Cras dictum erat eget turpis placerat, ac vulputate urna luctus. Suspendisse sit amet fringilla turpis. Nulla tincidunt malesuada laoreet. Mauris et mi orci.</p>
</div>

</div>

css:

h1 {
    font-family: 'Martel', serif;
    font-size: 2.9rem;
    font-weight: bold;
    text-align: center;
    padding: 0 20px;
    margin-bottom: 20px;
    margin-top: 5vh;
    color:white;
}
.date {
    font-family: 'Martel', serif;
    font-size: 1.1rem;
    text-align: center;
    padding-bottom: 0px;
    margin-top: 50px;
    font-weight: 600;
}
hr {
    width: 12vw;
    text-align: center;
    margin: 0 auto;
    border: none;
    color: black;
    background-color: black;
    height: 2px;
    padding-top: 0;
    margin-top: 5px !important;
    margin-bottom: 0 !important;
}
.title {
    font-family: 'Martel', serif;
    color: #9b9b9b;
    font-weight:600;
    font-size: 1.8rem;
    text-align: center;
    margin-top: 10px;
}

.caption {
    font-size: 1rem;
    text-align: center;
    line-height: 140%;
    color: gray;
    font-family: 'Martel', serif;
    text-shadow: none;
    width: 86%;
    margin-left: 7%;
    margin-top: 10px;

}

.screen {
        position: relative;
            width: 100%;
            z-index: 100;
            height: 100vh;
            background-color: transparent;
}
#screen2 {
   background-color: green;
   opacity: 0.5;

}
#purple-mask {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #3b253b;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 90;
}

Answer 1

哎呀！好的，我已经弄清楚了。我忘记了。您已将 screen1 中的所有内容包含在 div 中，例如 id="first"，然后固定 that，而不是封闭的屏幕。然后固定并淡化紫色遮罩。

所以 html 看起来像这样：

<div class="screen" id="screen1">
    <div id="purple-mask"></div>
    <div id="first">
    <div class="date">October 16, 1915</div>
    <hr/>
    <div class="title">Seven thousand march for "Votes for Women"</div>
    <div class="caption">About 7,000 people marched supporting women's right to vote</div>
    <div><!-- end of first -->
</div>

<div class="screen"></div>

<div class="screen" id="screen2">
<h1>Getting women the vote</h1>
<div class="intro-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus, urna non bibendum imperdiet, turpis quam iaculis nibh, sit amet porttitor nisl metus eget augue. Phasellus bibendum, arcu a dignissim convallis, massa risus ultrices massa, dignissim aliquet quam nibh at eros. Sed congue mattis varius. Suspendisse ultrices non tellus in posuere. Morbi maximus a diam ac blandit. Pellentesque tristique ante id eleifend accumsan. Cras vitae aliquet orci. Cras dictum erat eget turpis placerat, ac vulputate urna luctus. Suspendisse sit amet fringilla turpis. Nulla tincidunt malesuada laoreet. Mauris et mi orci.</p>
</div>

</div>

代码看起来像这样：

var fadeUp01 = TweenMax.to('#purple-mask', 1.5, {opacity: .9}); //fade in timestamp1

var scene = new ScrollMagic.Scene({
        triggerElement: "#screen1",
        duration: height*3, 
        triggerHook: 0, 
        reverse: true 
})
.setPin("#first", {pushFollowers: true})
.addTo(controller);

var scene = new ScrollMagic.Scene({
        triggerElement: "#screen1",
        duration: height*3, 
        triggerHook: 0, 
        reverse: true 
})
.setPin("#purple-mask", {pushFollowers: true})
.setTween(fadeUp01)
.addTo(controller);

在 scrollmagic 中，我如何固定场景，在该场景中制作动画，然后让下一个场景滚动到它上面？

in scrollmagic, how would I pin a scene, have an animation take place in that scene, then have the next scene scroll over it?

scrollmagic

gsap