今回は CSS Transition と CSS Animation の勉強がてら、電車の方向幕みたいなものを作ったので公開。
動かした様子がこちら。
目次
参考
準備
環境構築を以下の通り行います。
1
2
3
4
5
| npm init -y
npm i --save-dev http-server
mkdir public
npx http-server
|
http://localhost:8080にブラウザでアクセスするとpublic/index.htmlが表示されます。
CSS Transition で方向幕を作成
public/index.htmlを以下のように編集します。
public/index.html1
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
| <html>
<head>
<title>Stations</title>
<link
href="https://fonts.googleapis.com/css?family=M+PLUS+1p"
rel="stylesheet"
/>
<style>
.roll-box {
margin: 0;
padding: 0;
height: 60px;
width: 240px;
overflow: hidden;
border: black solid 3px;
background-color: black;
}
#stations {
position: relative;
margin: 0;
padding: 0;
}
#stations > div {
color: white;
font-size: 50px;
font-weight: 600;
font-family: "M PLUS 1p";
width: 200px;
position: absolute;
top: -70;
left: 20px;
margin: 0 auto;
text-align: center;
}
.slide-in {
transition: all 3000ms 0s linear;
transform: translate(0px, 120px);
}
</style>
</head>
<body>
<div>
<div class="roll-box">
<div id="stations">
<div>大崎</div>
<div>品川</div>
<div>目黒</div>
<div>五反田</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.slim.js"
integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI="
crossorigin="anonymous"
></script>
<script>
var count = 0;
setInterval(function () {
var index = count % $("#stations div").length;
$("#stations div").eq(index).addClass("slide-in");
setTimeout(() => {
$("#stations div").eq(index).removeClass("slide-in");
}, 3000);
count += 1;
}, 1500);
</script>
</body>
</html>
|
こちらを作成して、ブラウザをリロードすると、次のように表示されます。
山手線内回りの方向幕ができました。
クラスを付与してあげるだけで連続したアニメーションの様に見せかけることができました。
しかし、ノンストップに動かすだけだと見づらい部分もあるかなと感じます。
CSS Animation で方向幕を作成
CSS Transition は一時停止できなかったので、今度は CSS Animation を使用して、一旦動作を停止してみます。
動作を停止させることで、可読性が上がります。
public/index.htmlを以下のように編集します。
public/index.html1
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
| <html>
<head>
<title>Stations</title>
<link
href="https://fonts.googleapis.com/css?family=M+PLUS+1p"
rel="stylesheet"
/>
<style>
.roll-box {
margin: 0;
padding: 0;
height: 60px;
width: 240px;
overflow: hidden;
border: black solid 3px;
background-color: black;
}
#stations {
position: relative;
margin: 0;
padding: 0;
}
#stations > div {
color: white;
font-size: 50px;
font-weight: 600;
font-family: "M PLUS 1p";
width: 200px;
position: absolute;
top: -70;
left: 20px;
margin: 0 auto;
text-align: center;
}
.slide-in {
animation: 2s linear 0s alternate slide-anim;
}
@keyframes slide-anim {
0% {
transform: translate(0px, 0px);
}
30% {
transform: translate(0px, 60px);
}
70% {
transform: translate(0px, 60px);
}
100% {
transform: translate(0px, 120px);
}
}
</style>
</head>
<body>
<div>
<div class="roll-box">
<div id="stations">
<div>大崎</div>
<div>品川</div>
<div>目黒</div>
<div>五反田</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.slim.js"
integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI="
crossorigin="anonymous"
></script>
<script>
var count = 0;
setInterval(function () {
var index =
$("#stations div").length - (count % $("#stations div").length) - 1;
$("#stations div").eq(index).addClass("slide-in");
setTimeout(() => {
$("#stations div").eq(index).removeClass("slide-in");
}, 3000);
count += 1;
}, 1500);
</script>
</body>
</html>
|
こちらを作成して、ブラウザをリロードすると、次のように表示されます。
山手線外回りの方向幕ができました。
transform: translate(0px, 60px);を全体の動作の 30%から 70%まで続けることで、一時停止をさせました。
動き続ける文字よりはかなり見やすくなりました。
今回は、 CSS Transition と CSS Animation を使用したアニメーションで方向幕を作ってみました。
特に CSS Animation は複数の段階を踏んだ動作を組めるので、かなり複雑な挙動も実現できそうです。
また何か作りたいところです。
ではでは。