Question

这是我的标记：

<section class="main1">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-4">
                <h1>It starts with an <span class="yellow">idea</span></h1>
                <p>But it’s the experience of a team of multi-disciplinary professionals that transforms those ideas into a realities.</p>
            </div>
        </div>
    </div>
</section>

<section class="main2">
    <div class="container">
        <div class="row">
            <div class="col-lg-5">
                <h1>MAKING <span class="yellow">IDEAS</span> A REALITY IS WHAT WE DO</h1>
                <p>Arciplex has the team and experience necessary to guide and assure your ideas become a reality</p>
            </div>
        </div>
    </div>
</section>

这是我的JavaScript（CoffeeScript）：

ready = ->
    $body = $('body')

    if $body.is '.home'
        controller = new ScrollMagic({globalSceneOptions: {triggerHook: "onEnter", duration: $(window).height()*2}})

        new ScrollScene({ triggerElement: ".main1" })
        .setTween(TweenMax.from(".main1", 1,
              top: "-80%"
              ease: Linear.easeNone
        )).addTo(controller)

        new ScrollScene({ triggerElement: ".main2" })
        .setTween(TweenMax.from(".main2", 2,
              top: "-80%"
              ease: Linear.easeNone
        )).addTo(controller)


$(document).ready ready
$(document).on 'page:load', ready

就像现在一样，动画什么都不做（我是ScrollMagic() newb）。我只是希望实现一种效果，当您滚动时，第一部分的文本会淡出，当您将下一部分滚动到视图中时，它的内容会淡入。

请原谅我对ScrollMagic()和视差的无知，我是一个带视差的完整新手

Answer 1

您可以尝试TweenMax.fromTo功能。

使用ScrollMagic淡化文本

1 个答案: