見出し画像

よくある一文字ずつ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が格納されループするという感じでしょうか。
こうすることで、わざわざ９つのnth-childを記載しなくて済みます！
$iの部分は$aでも$bでも任意の文字で問題ありません！
nth-childの後の#{$i}は#{}の中に$iを記載するのが決まりになっています。

そうするとうまくアニメーションできたと思います！

スクリーンショット 2022-04-07 1.26.01




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();は文字の余白を削除するメソッド。

スクリーンショット 2022-04-07 2.23.46

次に一文字ずつを<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>で囲ったもの）を＝で繋げばうまくいきます！

スクリーンショット 2022-04-07 2.52.59


JSで<span>を囲うことで、コードがスッキリしますね！！


大阪在住の２9歳。web制作会社勤務。noteを通してたくさんの出会いを作っていきたいです。台湾が大好きで中国語勉強中。日台夫婦。日々の挑戦の記録や、社会の生きづらさ、台湾のことなどを書いていこうと思います。2023年台湾に移住予定です。