よくある一文字ずつfadeしてくるアニメーションの実装してみた!
こんばんは!
大阪の制作会社で働いているゆーたです。
今回はsassとJSで、よくある一文字ずつfadeしてくるアニメーションの実装をしてみました!
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<title>サンプル</title>
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="animation">
<span>A</span>
<span>N</span>
<span>I</span>
<span>M</span>
<span>A</span>
<span>T</span>
<span>I</span>
<span>O</span>
<span>N</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
HTMLはこちらです。
一文字ずつfadeさせるので、spanタグで囲ってます。
続いてsass。
.animation{
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #333;
letter-spacing: 0.1em;
span{
display: inline-block;
opacity: 0;
animation-name: fadeanime;
animation-duration: 1s;
// animation-delay: 1s;
animation-fill-mode: forwards;
@for $i from 1 through 9{
&:nth-child(#{$i}){
animation-delay: $i * 0.1s;
}
}
}
}
@keyframes fadeanime{
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
こういう感じでまとまります。
transformはブロック要素でないと効きませんので、
display:inline-block;を指定しております。
@keyframes fadeanimeでアニメーションの設定をしております。
ここで活用
sassではfor文が使用できるので、以下のように設定できます!
@for $i from 1 through 9{
&:nth-child(#{$i}){
animation-delay: $i * 0.1s;
}
}
$iに数字の1〜9が格納されループするという感じでしょうか。
こうすることで、わざわざ9つのnth-childを記載しなくて済みます!
$iの部分は$aでも$bでも任意の文字で問題ありません!
nth-childの後の#{$i}は#{}の中に$iを記載するのが決まりになっています。
そうするとうまくアニメーションできたと思います!
JSで記述する方法
ここでJSで記述する方法をまとめてみたいと思います!
というのもspanタグで一文字ずつ囲っているのをJSで制御してみます。
htmlは以下の通り。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<title>サンプル</title>
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="animation">
ANIMATION
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
まずは以下のように記述します。
document.addEventListener('DOMContentLoaded',function(){
const target = document.querySelector('.animation');
const targetHtml = target.innerHTML.trim();
console.log(targetHtml);
})
console.logで確認するとANIMATIONの文字が取れてきているのがわかります!
document.addEventListener('DOMContentLoaded'~
htmlを全て読み込む前にイベントを発火させる。
const target = document.querySelector('.animation');
target(任意)という変数にanimationというclassを格納。
const targetHtml = target.innerHTML.trim();
targetHtml(任意)という変数にtargetのinnerHTMLで文字を取得。
trim();は文字の余白を削除するメソッド。
次に一文字ずつを<span>で囲んでいきます!
document.addEventListener('DOMContentLoaded',function(){
const target = document.querySelector('.animation');
const targetHtml = target.innerHTML.trim();
let str = '';
for(let c of targetHtml){
str = str + `<span>${c}</span>`;
}
target.innerHTML = str;
})
strという空の変数を定義。
for文でtargetHtmlの文字を一文字ずつループさせ、strを<span>${c}</span>で囲むようにする。
target.innerHTML(ANIMATION)と、
str(ANIMATIONを一文字ずつ<span>で囲ったもの)を=で繋げばうまくいきます!
JSで<span>を囲うことで、コードがスッキリしますね!!
大阪在住の29歳。web制作会社勤務。noteを通してたくさんの出会いを作っていきたいです。台湾が大好きで中国語勉強中。日台夫婦。日々の挑戦の記録や、社会の生きづらさ、台湾のことなどを書いていこうと思います。2023年台湾に移住予定です。