/
wa_step3.html
157 lines (143 loc) · 4.7 KB
/
wa_step3.html
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="color-scheme" content="dark" />
<link href="base.css" rel="stylesheet" />
<style>
.headline {
position: relative;
overflow: hidden;
display: inline-block;
}
.headline::before {
position: absolute;
top: 0;
left: 0;
content: "";
display: block;
background: white;
width: 100%;
height: 100%;
transform: translateX(-101%);
}
.headline .label {
opacity: 0;
}
.slideX {
opacity: 0;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", async () => {
// 少しだけ待機
await new Promise((r) => setTimeout(r, 500));
{
// 見出し演出
const target = document.querySelectorAll(".headline");
target.forEach((el, index) => {
// あしらいとしての矩形
el.animate(
[
{ transform: "translateX(-100%)", offset: 0 },
{ transform: "translateX(100%)", offset: 1 },
],
{
duration: 1000,
delay: 100 * index,
pseudoElement: "::before",
fill: "forwards",
// easing: "cubic-bezier(0.87, 0, 0.13, 1)"
easing: "cubic-bezier(0.65, 0, 0.35, 1)",
}
);
// 見出しのテキストは矩形が通り過ぎてから表示
el.querySelector(".label").animate(
[{ opacity: 0 }, { opacity: 1 }],
{
duration: 30,
delay: 100 * index + 500,
fill: "forwards",
}
);
});
// 見出し以外のアイテム
const target2 = document.querySelectorAll(".slideX");
target2.forEach((el, index) => {
el.animate(
[
{ transform: "translateX(-32px)", opacity: 0 },
{ transform: "translateX(0%)", opacity: 1 },
],
{
duration: 750,
delay: 100 * index + 200,
fill: "forwards",
easing: "cubic-bezier(0.33, 1, 0.68, 1)",
}
);
});
}
// 演出をもう一度再生（
setTimeout(() => { location.reload(); }, 5000);
});
</script>
</head>
<body>
<section>
<h1>
<div class="headline">
<span class="label">Google Material Design</span>
</div>
</h1>
<p class="slideX">
Material is a design system created by Google to help teams build
high-quality digital experiences for Android, iOS, Flutter, and the web.
<br />
Produced by Google.
</p>
<div class="buttonGroup">
<a href="#" class="button slideX">Website</a>
</div>
</section>
<section>
<h1>
<div class="headline">
<span class="label">Human Interface Guidelines</span>
</div>
</h1>
<p class="slideX">
People expect macOS apps to be intuitive, while simultaneously adaptable
to their workflow through customization and flexibility. Many apps offer
configurable preferences, customizable interfaces, and alternate ways of
completing tasks. Windows can often be resized and interface elements
hidden or repositioned. Tasks can be initiated from toolbars, menus,
controls, keyboard shortcuts, the Touch Bar, accessibility features, and
more. A flexible app facilitates learning through discoverability.
</p>
<div class="buttonGroup">
<a href="#" class="button slideX">iOS</a>
<a href="#" class="button slideX">macOS</a>
</div>
</section>
<section>
<h1>
<div class="headline"><span class="label">Spectrum</span></div>
</h1>
<p class="slideX">
We believe that people should have a high quality experience that
effortlessly scales across platforms.<br />
Spectrum considers all platforms — for both desktop and mobile — from
the ground up. We recognize that people work across many different
products and often need to context switch, so our scale system accounts
for better legibility and easier UI interactions to set a foundation for
consistent experiences across devices.
</p>
<div class="buttonGroup">
<a href="#" class="button slideX">Principles</a>
<a href="#" class="button slideX">What's new</a>
<a href="#" class="button slideX">Color</a>
</div>
</section>
</body>
</html>