css 在页面滚动上具有视差效果Lottie动画

yks3o0rb 于 2022-11-19 发布在其他

关注(0)|答案(1)|浏览(139)

我正在尝试创建交互式乐透动画，我通过official guide使其工作。但有一个问题，动画很长，我需要一种视差效果，理想的情况下，将开始和结束的动画。我尝试了几个css的解决方案，特别是position: fixed与自定义height，但动画停止使用这些属性。

具有固定位置的示例代码：（无动画）

<body style="height: 1000px;">

    <div id="MyContainerId" style="position: fixed;">
        <lottie-player id="firstLottie" src="https://assets2.lottiefiles.com/packages/lf20_ug2jsixg.json" background="transparent" speed="1" style="width: 100%; height: 100vh;"></lottie-player>
    </div>

    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
    <script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
    <script>
        LottieInteractivity.create({
            mode: 'scroll',
            player: '#firstLottie',
            container: '#MyContainerId',
            actions: [{
                visibility: [0, 1],
                type: 'seek',
                frames: [0, 100],
            }, ],
        });
    </script>
</body>

具有粘滞位置的示例代码：（动画显示，但在屏幕上隐藏）

<body style="height: 1000px;">

    <div id="MyContainerId" style="position: sticky;">
        <lottie-player id="firstLottie" src="https://assets2.lottiefiles.com/packages/lf20_ug2jsixg.json" background="transparent" speed="1" style="width: 100%; height: 100vh;"></lottie-player>
    </div>

    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
    <script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
    <script>
        LottieInteractivity.create({
            mode: 'scroll',
            player: '#firstLottie',
            container: '#MyContainerId',
            actions: [{
                visibility: [0, 1],
                type: 'seek',
                frames: [0, 100],
            }, ],
        });
    </script>
</body>

我想，我使用了错误的CSS属性组合。我该如何解决这个问题？

css

来源：https://stackoverflow.com/questions/69303726/lottie-animation-with-parrallax-effect-on-page-scroll

1条答案

按热度按时间

s3fp2yjn1#

你几乎做到了，只是不要用粘性div作为容器，创建一个新的分离的div并将其放置在播放器下面。然后使用一个新的div作为两个元素的 Package 。
此外，如果在 Package 器外部添加底部div，则可以在动画完成后向上滚动播放器。

<body >
    <div>
        <div style="background-color:transparent; height:1px; position:sticky; top:0">
            <lottie-player 
                id="firstLottie" 
                src="https://assets2.lottiefiles.com/packages/lf20_ug2jsixg.json" 
                background="transparent" 
                speed="1" 
                style="width:100%; height: auto;"
            ></lottie-player>
        </div>

        <div id="MyContainerId" style="height:300vh; background-color:transparent"></div>
    
    
        <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
        <script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
        <script>
            LottieInteractivity.create({
                mode: 'scroll',
                player: '#firstLottie',
                container: '#MyContainerId',
                actions: [{
                    visibility: [0, 1],
                    type: 'seek',
                    frames: [0, 100],
                }, ],
            });
        </script>
    </div>

        <div style="height:200vh; background-color:wheat"></div>

    </body>

赞(0）回复(0）举报 2022-11-19

我来回答

css 在页面滚动上具有视差效果Lottie动画

1条答案

相关问题

热门标签

最新问答