GSAP ScrollTrigger アニメーションを使用してタイムライン セクションを作成しようとしています。5 つの異なる画像を含む 5 つのテキスト ブロック (5 つのタイムライン要素) があります。デフォルトでは、表示されるテキスト ブロックは 1 つだけですが、スクロールすると、非表示のテキスト ブロック (2 番目のテキスト ブロック) が 100% の不透明度でフェードアップし、前のテキスト ブロック (1 番目のテキスト ブロック) の不透明度が減少します。3 番目のテキスト ブロックがアクティブになると (スクロールで表示される)、最初のテキスト ブロックが画面から消え、2 番目のテキスト ブロックの不透明度が減少します。
注: デフォルトでは、アクティブなテキスト ブロックは 1 つだけです。ただし、スクロールすると、2 つのテキスト ブロックが表示されます。一方は不透明度 100% でアクティブになり、もう一方は不透明度 50% でぼやけます。
デフォルトの状態では問題なく動作していますが、スクロールしているときに前のテキスト ブロックが画面から消えません。私が codepen ( https://codepen.io/shuvosd/pen/RwKZEEe ) で行ったことを見て、問題を解決するのを手伝ってくれたら、本当に感謝しています。前もって感謝します。
ScrollTrigger.defaults({
markers: true
});
var points = gsap.utils.toArray(".point");
var height = 100 * points.length;
var tl = gsap.timeline({
duration: points.length,
scrollTrigger: {
trigger: ".philosophie",
start: "top bottom",
end: "+=" + height + "%",
scrub: true,
id: "points"
}
});
var pinner = gsap.timeline({
scrollTrigger: {
trigger: ".philosophie .wrapper",
start: "top top",
end: "+=" + height + "%",
scrub: false,
pin: ".philosophie .wrapper",
pinSpacing: true,
id: "pinning",
//markers: true
}
});
points.forEach(function (elem, i) {
// doesn't allow links to render
gsap.set(elem, { position: "absolute", top: 0 });
tl.from(elem.querySelector("img"), { autoAlpha: 0 }, i);
tl.from(elem.querySelector("article"), { autoAlpha: 0, y: 200 }, i);
if (i != points.length - 1) {
tl.to(
elem.querySelector("article"),
{ autoAlpha: .2, y: -200 },
i + 0.90
);
tl.to(elem.querySelector("img"), { autoAlpha: 0 }, i + 0.90);
}
});*{
margin:0;
padidng:0;
}
.philosophie {
position: relative;
}
.philosophie .point {
height: 100vh;
width: 100%;
display: flex;
align-items: flex-end;
padding: 4rem;
box-sizing:border-box;
}
.philosophie .point:after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0 0 0 / 18%);
}
.philosophie .wrapper {
height: 100vh;
width: 100%;
}
.point article {
flex-basis: 60%;
margin-right: auto;
position: relative;
z-index: 9;
color:#fff;
}
.point img {
flex-basis: 100%;
height: 100%;
position:absolute;
width:100%;
object-fit:cover;
left:0;
top:0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/ScrollTrigger.min.js"></script>
<section class="philosophie">
<div class="wrapper">
<div class="point first">
<article>
<h3>Title One</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a href="https://google.com">I'm a link</a>
</article>
<img src="https://source.unsplash.com/random/500x500" alt="random" width="500" height="500" />
</div>
<div class="point">
<article>
<h3>Title Two</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</p>
<a href="https://google.com">I'm a link</a>
</article>
<img src="https://source.unsplash.com/random/510x500" alt="random" width="500" height="500" />
</div>
<div class="point">
<article>
<h3>Title Three</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<a href="https://google.com">I'm a link</a>
</article>
<img src="https://source.unsplash.com/random/501x500" alt="random" width="500" height="500" />
</div>
<div class="point">
<article>
<h3>Title Four</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer </p>
<a href="https://google.com">I'm a link</a>
</article>
<img src="https://source.unsplash.com/random/501x500" alt="random" width="500" height="500" />
</div>
<div class="point">
<article>
<h3>Title Five</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been </p>
<a href="https://google.com">I'm a link</a>
</article>
<img src="https://source.unsplash.com/random/501x500" alt="random" width="500" height="500" />
</div>
</div>
</section>