テキストをhoverしたら一文字ずつ入れ替わりに出現！

2023年9月28日 01:24

こんにちは！
台湾でフリーランスをしているゆーたです。
今回はこんな感じのアニメーションが面白かったのでまとめてみました！

HTML


<body>
        <h1 class="t-title"><a href="#">textwave</a></h1>
</body>

SCSS

@charset "utf-8";

body{
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #333;
}
.t-title{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 64px;
  letter-spacing: 0.075em;
  overflow: hidden;
  line-height: 1;
  a{
    color: #fff;
    span{
      position: relative;
      transition: 0.5s;
    }
    .out{
      transform: translateY(0%);
      display: inline-block;
    }
    .in{
      position: absolute;
      left: 0;
      color: blue;
      transform: translateY(100%);
    }
    &:hover .out{
      transform: translateY(-100%);
    }
    &:hover .in{
      transform: translateY(0);
    }
  }
  
}

let text = document.querySelectorAll(".t-title a");
text.forEach(link => {
    let letters = link.textContent.split("");
    link.textContent= "";
    letters.forEach((letter,i) =>{
        i += 1;
        let span =document.createElement("span");
        let delay =i/30;

        let letterOut = document.createElement("span");
        letterOut.textContent = letter;
        letterOut.style.transitionDelay = `${delay}s`;
        letterOut.classList.add("out");
        span.append(letterOut);

        let letterIn = document.createElement("span");
        letterIn.textContent = letter;
        letterIn.style.transitionDelay = `${delay}s`;
        letterIn.classList.add("in");
        span.append(letterIn);

        link.append(span);
    })

    
})

JSについての説明

let text = document.querySelectorAll(".t-title a");
class名の.t-title aの情報を取得し変数textに格納する。

text.forEach(link => {
それぞれのリンクに対して動作を指定する。
以下各リンクに対して以下の動作を行います。

let letters = link.textContent.split("");
link.textContent= "";
リンクの文字を1文字ずつに分割し、
元のリンクの文字を消去します。

letters.forEach((letter,i) =>{
それぞれの文字に対して動作を指定。

let span =document.createElement("span");
i += 1;
let delay =i/30;
spanを作成し、文字の位置（i）に基づいて、
アニメーションの遅延時間を計算します。
1/30,2/30みたいな感じですね。

let letterOut = document.createElement("span");
letterOut.textContent = letter;
letterOut.style.transitionDelay = `${delay}s`; letterOut.classList.add("out"); span.append(letterOut);
新しいspan要素を作成し、現在の文字をその中に設定します。
アニメーションの遅延をスタイルとして追加し、outクラスを追加します。
そして、この新しいspanを最初に作成したspan要素の中に追加します。

let letterIn = document.createElement("span");
letterIn.textContent = letter;
letterIn.style.transitionDelay = `${delay}s`;
letterIn.classList.add("in"); span.append(letterIn);
上記と同じような感じです。

link.append(span);
最初に作成したspan要素を、リンク要素の中に追加します。

TwitterやInstagramやってます！
仕事はフリーで主にweb制作をしております。
台湾好きや興味がある人とお友達になりたいです。
またweb制作の仕事も随時募集中なので、
ポートフォリオを見ていただけると嬉しいです！
DMお待ちしております！

Twitter:@trizolyuta
Instagram:@yuta208817
portoforio:https://nakamayuuta.sakura.ne.jp/

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