-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathmain.ts
More file actions
75 lines (70 loc) · 1.94 KB
/
Copy pathmain.ts
File metadata and controls
75 lines (70 loc) · 1.94 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
// プラグインはgsap.registerPluginで登録
gsap.registerPlugin(ScrollTrigger);
const button = document.querySelector("header");
const tween = gsap.to(button, {
duration: 0.5,
paused: true,
ease: "power2.out",
width: "100%",
height: "100px",
lineHeight: "100px",
borderRadius: "0%",
cursor: "default",
top: 0,
backgroundColor: "#0FBD94",
});
const showContent = () => {
// 以下のtween.play()とgsap.to()は同じことをしている
tween.play();
gsap.to("header h1", {
opacity: 1,
});
// 画像郡を連続的に表示するアニメーションの制御
gsap.to(".img-container img", {
opacity: 1,
delay: 1,
duration: 1.5,
y: -10,
ease: "power2.out",
// 複数要素を扱うプロパティ
stagger: {
from: "start",
amount: 0.8,
},
});
// スクロールイベントの制御
gsap
.timeline({
defaults: { ease: "power2.out", duration: 1.5 },
scrollTrigger: {
markers: true, // マーカーを表示するか（開発用）
trigger: ".content", // この要素と交差するとイベントが発火
start: "top 50%", // ウィンドウのどの位置を発火の基準点にするか
end: "bottom 25%", // ウィンドウのどの位置をイベントの終了点にするか
toggleActions: "play none none none", // スクロールイベントで発火するアニメーションの種類
},
})
.to(".content-text h2", {
opacity: 1,
y: -10,
})
.to(
".content-text p",
{
opacity: 1,
y: -10,
},
"-=1"
) // 直前のアニメーションに0.7秒かぶせる
.to(
".content img",
{
opacity: 1,
x: -10,
},
"-=1"
); // 直前のアニメーションに0.7秒かぶせる
};
button.addEventListener("click", showContent);