如何解决GSAP ScrollMagic - setPin() 有问题
我在这里问是因为我无法调试我的程序。 我想做一个页面来垂直滚动,然后水平滚动到“测试”部分的末尾,然后再次垂直滚动。 问题是 setPin() 不起作用......它完全是窃听
有人可以帮我吗?
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://use.typekit.net/qua3omc.css">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.js" integrity="sha512-judXDFLnOTJsUwd55lhbrX3uSoSQSOZR6vNrsll+4ViUFv+XOIr/xaIK96soMj6s5jVszd7I97a0H+WhgFwTEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addindicators.min.js" integrity="sha512-RvUydNGlqYJapy0t4AH8hDv/It+zKsv4wOQGb+iOnEfa6NnF2fzjXgRy+FDjSpMfC3sjokNUzsfYZaZ8QAwIxg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenLite.min.js" integrity="sha512-pvDW4tehKKsohH97164HwKwRGFpzayEFWTVbk8HuUoLIQ7Jp+WLN5XYokVuoCj2aT6dy8ihbW8SRTG1k0W4mSQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TimelineLite.min.js" integrity="sha512-tSIDeirKC6suYILHqqPuZH3s0MvD4a5vCHXhBIcdmq4gQXZ2IB3fEYA5x2f3D2p/CbSqzKEvuTEVbS5VZ2u+ew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/Cssplugin.min.js" integrity="sha512-ocsFo48WU8Xq6Y1Lwi7psXRAujG9E4TKNR4q1DbrKzaaxOMTEoao/a+mdob+cYzY4lwbyxvqjkp/ZA1/MNlfsg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<title>Document</title>
</head>
<body>
<section id="test">
<div class="big-bloc">
<div class="bloc">
</div>
<div class="bloc">
</div>
<div class="bloc">
</div>
<div class="bloc">
</div>
</div>
</section>
</body>
</html>
<script>
const tweenbloc = new TimelineLite();
var bigbloc = document.getElementsByClassName('.big-bloc');
var width_bigbloc = bigbloc.offsetWidth;
tweenbloc.add(
TweenLite.to('.bloc',1,{
xPercent: -400,})
)
const controller = new ScrollMagic.Controller();
const bloc_scene = new ScrollMagic.Scene({
triggerElement: '.big-bloc',duration: 500,triggerHook: 0.2
})
.setTween(tweenbloc)
.addindicators()
.setPin('#test')
.addTo(controller);
</script>
我的 CSS
#test {
width: 100%;
height: 100vh;
background-color: springgreen;
overflow: hidden;
}
#test .big-bloc {
background-color: wheat;
overflow: hidden;
display: flex;
}
#test .bloc {
flex-shrink: 0;
width: 300px;
height: 300px;
margin: 10px;
background-color: violet;
}
非常感谢 :)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。