1. 目的
GSAPを使い、スクロールに合わせて要素をフェードインさせる。
2. デモ
1st. スクロールのためのダミー要素。
2nd. スクロールのためのダミー要素。
3rd. スクロールのためのダミー要素。
スクロールに伴い、この下に文章が表示される。
私は今日初めてこの学習院というものの中に這入りました。もっとも以前から学習院は多分この見当だろうぐらいに考えていたには相違ありませんが、はっきりとは存じませんでした。中へ這入ったのは無論今日が初めてでございます。
さきほど岡田さんが紹介かたがたちょっとお話になった通りこの春何か講演をというご注文でありましたが、その当時は何か差支があって、――岡田さんの方が当人の私よりよくご記憶と見えてあなたがたにご納得のできるようにただいまご説明がありましたが、とにかくひとまずお断りを致さなければならん事になりました。しかしただお断りを致すのもあまり失礼と存じまして、この次には参りますからという条件をつけ加えておきました。その時念のためこの次はいつごろになりますかと岡田さんに伺いましたら、此年の十月だというお返事であったので、心のうちに春から十月までの日数を大体繰ってみて、それだけの時間があればそのうちにどうにかできるだろうと思ったものですから、よろしゅうございますとはっきりお受合申したのであります。ところが幸か不幸か病気に罹かかりまして、九月いっぱい床とこについておりますうちにお約束の十月が参りました。十月にはもう臥ふせってはおりませんでしたけれども、何しろひょろひょろするので講演はちょっとむずかしかったのです。しかしお約束を忘れてはならないのですから、腹の中では、今に何か云って来られるだろう来られるだろうと思って、内々ないないは怖こわがっていました。
私の個人主義
3. ソースコード
// use a script tag or an external JS file
document.addEventListener("DOMContentLoaded", (event) => {
gsap.registerPlugin(ScrollTrigger)
// gsap code here!
gsap.fromTo(
".box",
{
x: -100,
y: -100,
scale: 0.5,
autoAlpha: 0,
},
{
x: 0,
y: 0,
scale: 1,
stagger: 0.2,
autoAlpha: 1,
scrollTrigger: {
trigger: ".box",
toggleActions: "play none none reverse",
start: "top center",
markers: true
},
}
);
});