その4から続く
ボタンを押したら発火するシンプルなアニメーションを作ってみよう！
HTMLの記述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet"href="style.css">
</head>
<body>
<div id="container">
<div class="animate-title">
<spanclass="char">A</span>
<spanclass="char">N</span>
<spanclass="char">I</span>
<spanclass="char">M</span>
<spanclass="char">A</span>
<spanclass="char">T</span>
<spanclass="char">I</span>
<spanclass="char">O</span>
<spanclass="char">N</span>
</div>
<button onclick="document.querySelector('.animate-title').classList.toggle('inview');">Animation</button>
</button>
</div>
</body>
</html>mixinの記述
@mixin animation(
$name,
$duration: 1s,
$timing-function: ease,
$delay: 0s,
$iteration-count: 1,
$direction: normal,
$fill-mode: forwards
) {
animation: {
name: $name;
duration: $duration;
timing-function: $timing-function;
delay: $delay;
iteration-count: $iteration-count;
direction: $direction;
fill-mode: $fill-mode;
}
}SCSSの記述
@import "mixin";
// ブラウザのデフォルトのマージンをけして余白をなくす
body {
margin: 0;
}
#container {
position: relative;
// 画面を縦いっぱいにする
height: 100vh;
background-color: teal;
}
.animate-title {
position: absolute;
// コンテナの真ん中で表示したいため
top: 50%;
left: 50%;
// 中央寄せ
transform: translate(-50%, -50%);
color: White;
opacity: 0;
font-size: 2em;
font-family: "Teko", sans-serif;
&.inview {
// invuiewが振られたとき透明度を解除
opacity: 1;
&.char {
// 上から降りてくるようにする。spanなのでinline-blockにしないとダメ
display: inline-block;
// アニメーションの設定
@includeanimation(
$name: kf-animate-chars,
$duration: 0.5s,
$timing-function: cubic-bezier(0.39, 1.57, 0.58, 1),
$fill-mode: both
);
// for文を使って1から9までの処理をループさせているよ
@for $i from 1 through 9 {
&:nth-child(#{$i}) {
animation-delay: $i * 0.04s;
}
}
}
}
}
@keyframes kf-animate-chars {
0% {
// 最初透明で上方向50％のところにいる
opacity: 0;
transform: translateY(-50%);
}
100% {
// 透明化を解除して50％から原点に戻ることでアニメーションしているように見せる
opacity: 1;
transform: translateY(0);
}
}完成イメージ
※テキストアニメーションのまとめ
HTMLの部分
- まず初めに<div id=”container”>の中に入れる
- <div class=”animate-title”>の中にアニメーションしたい文言を入れる
- ボタンを作成してinviewのときにクリックしたらアニメーションするように記述する。
SCSSの部分
1.mixinをインポートする。mixinとはモジュール
2.bodyやcontainerで初期設定を行う(余白消したり背景色決めたり)
3..animate-titleにて画面真ん中に中央寄せで表示するための設定をする。
4.inviewの状態の時透明度を解除する設定をする。
5..charにアニメーションの設定を記述する
6.@includeanimationにてアニメーションの具体的な設定を記述する。