Question

我的问题是，我想用固定定位背景的scrollmagic lib创建一个不错的网站。有没有一个好方法，实现它？

现在我有一个固定定位的背景包装，在＆＃34;后面＆＃34; （比如z-index -1），以及我拥有scenes的前层。（就像带有帽子的scrollMagic登陆页面一样）。前2 scene将第一个背景图层作为背景，第二个2将背景图层作为背景。

场景内容必须像固定位置一样工作。

index.html （部分）

<section class="bg-sections">
    <div class="scene1-2-backgrounds"></div>
    <div class="scene3-4-backgrounds"></div>
</section>
<section class="scene-1">
    <p>Some text and other content</p>
</section>
<section class="scene-2">
    <p>Some text and other content</p>
</section>
<section class="scene-3">
    <p>Some text and other content</p>
</section>
<section class="scene-4">
    <p>Some text and other content</p>
</section>

我使用Tweenmax（GSAP）作为动画。

scenes.js （部分）

    var scrollAnimation1 = new TimelineMax();

    var sequence1 = new TimelineMax(),
        sequence2 = new TimelineMax(),
        sequence3 = new TimelineMax(),
        sequence4 = new TimelineMax();

    sequence1.to($('.masked-text'), 1, {backgroundPosition: "1800px -60px"});
    sequence2.to($('.scene-2 p.bold'), 0.3, {opacity: 0.7});
    sequence3.to($('.scene-2 p.last-txt'), 0.3, {opacity: 1});
    sequence4.to($('.scene-2'), 0.3, {top: '-100vh', opacity:0});

    scrollAnimation1.add(sequence1, 0);
    scrollAnimation1.add(sequence2, 1);
    scrollAnimation1.add(sequence3, 1);
    scrollAnimation1.add(sequence4, 1.3);

    var scene2 = new ScrollMagic.Scene({
        duration: 1000, 
        offset: 400,        
        tweenChanges: true,
        triggerOffset: 0
    })
        .setPin(".scene-2")
        .setTween(scrollAnimation1)
        .addTo(wController);

现在它正在运行，但是当用户在页面中间刷新浏览器时，所有动画都从头开始播放。

具有固定定位背景的scrollmagic

0 个答案: