0

这是我的标记：

<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()新手）。我只是想实现一种效果，当您滚动时，第一部分的文本会淡出，而当您滚动下一部分进入视图时，它的内容会淡入。

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

4

1 回答 1

0

你可以试试TweenMax.fromTo函数。

于 2015-05-08T15:54:54.610 回答