我正在尝试创建交互式lottie动画，我通过遵循官方指南得到了它的工作。但有个问题，动画很长，我需要视差效果，理想情况下，它会随着动画开始和结束。我尝试了几个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属性组合。我如何解决这个问题?
你几乎就做到了，只是不要使用粘性div作为容器，创建一个新的分离的div并将其放置在播放器下方。然后使用一个新的div作为两个元素的包装器。
另外，如果你在包装器外添加底部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>