在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);