gpt4 book ai didi

jquery - ScrollMagic 固定并显示问题

转载 作者:行者123 更新时间:2023-12-01 04:48:03 25 4
gpt4 key购买 nike

我正在尝试将图片暂停一段时间。滚动一点后,图片(第 1 部分)应该淡出并显示下面的图片。再滚动一段时间后,两者都应该滚动出来。

我正在使用http://janpaepke.github.io/ScrollMagic但不知何故,固定和动画的组合不起作用。

<body>
<script>
var controller;
$(document).ready(function($) {
controller = new ScrollMagic();
});
</script>

<div id="trigger1"></div>
<section>
<img id="part1" src="img/part1.jpg" height="950" width="" />
<img id="part2" src="img/part1.jpg" height="950" width="" />
</section>

<div class="spacer s10"></div>
<div id="trigger2"></dv>

<script>
$(document).ready(function($) {

var scene = new ScrollScene({triggerElement: "#trigger1", duration: 1600})
.setPin("#part1")
.addTo(controller);

var scene = new ScrollScene({triggerElement: "#trigger2"})
.setTween(TweenMax.to("#part1", 2, {opacity: 0}))
.addTo(controller);

// show indicators (requires debug extension)
scene.addIndicators();
});
</script>
</body>

最佳答案

如果您仅使用第一张图像作为固定目标,则只会固定第一张图像。 (废话)
这会导致第二个图像被向下推,直到固定完成。

要实现您所描述的效果,您需要固定两个图像的容器(在您的情况下是部分)。然后按照您的预期淡出图像。确保将第一张图像设置为 position:absolute 并提升 z-index。

希望这有帮助,
J

关于jquery - ScrollMagic 固定并显示问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25977771/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com