[自分用メモ]バニラjsでテキストにクラス付与してアニメーションを付ける方法　

原龍我

HMTLファイルに記載したテキスト「 PLAY ANIMATION」にjsを使い一文字ずつに<span>タグを付与していく方法

HMTLの記述

<body>
    <div id="container">
        <div class="animate-title inview">
            PLAY ANIMATION
        </div>
    </div>
</body>

CSSの記述

html {
  font-family: "Teko", sans-serif;
}

body {
  margin: 0;
}

#container {
  position: relative;
  height: 100vh;
  background-color: teal;
}

.animate-title,
.animate-title-2 {
  color: white;
  opacity: 0;
  font-size: 2em;
}
.animate-title.inview,
.animate-title-2.inview {
  opacity: 1;
}
.animate-title.inview .char,
.animate-title-2.inview .char {
  display: inline-block;
  -webkit-animation-name: kf-animate-chars;
          animation-name: kf-animate-chars;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-timing-function: cubic-bezier(0.39, 1.57, 0.58, 1);
          animation-timing-function: cubic-bezier(0.39, 1.57, 0.58, 1);
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.animate-title.inview .char:nth-child(1),
.animate-title-2.inview .char:nth-child(1) {
  -webkit-animation-delay: 0.04s;
          animation-delay: 0.04s;
}
.animate-title.inview .char:nth-child(2),
.animate-title-2.inview .char:nth-child(2) {
  -webkit-animation-delay: 0.08s;
          animation-delay: 0.08s;
}
.animate-title.inview .char:nth-child(3),
.animate-title-2.inview .char:nth-child(3) {
  -webkit-animation-delay: 0.12s;
          animation-delay: 0.12s;
}
.animate-title.inview .char:nth-child(4),
.animate-title-2.inview .char:nth-child(4) {
  -webkit-animation-delay: 0.16s;
          animation-delay: 0.16s;
}
.animate-title.inview .char:nth-child(5),
.animate-title-2.inview .char:nth-child(5) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.animate-title.inview .char:nth-child(6),
.animate-title-2.inview .char:nth-child(6) {
  -webkit-animation-delay: 0.24s;
          animation-delay: 0.24s;
}
.animate-title.inview .char:nth-child(7),
.animate-title-2.inview .char:nth-child(7) {
  -webkit-animation-delay: 0.28s;
          animation-delay: 0.28s;
}
.animate-title.inview .char:nth-child(8),
.animate-title-2.inview .char:nth-child(8) {
  -webkit-animation-delay: 0.32s;
          animation-delay: 0.32s;
}
.animate-title.inview .char:nth-child(9),
.animate-title-2.inview .char:nth-child(9) {
  -webkit-animation-delay: 0.36s;
          animation-delay: 0.36s;
}

@-webkit-keyframes kf-animate-chars {
  0% {
    opacity: 0;
    transform: translateY(-50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes kf-animate-chars {
  0% {
    opacity: 0;
    transform: translateY(-50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}/*# sourceMappingURL=style.css.map */

jsの記述

document.addEventListener("DOMContentLoaded", function() {
const el = document.querySelector(".animate-title");
const sty = el.innerHTML.trim().split("");

el.innerHTML = sty.reduce((acc, aruu) => {
aruu = aruu.replace(" ", "&nbsp")
return `${acc}<span class="char">${aruu}</span>`;
}, "");
});

class属性を使う場合の記述が下記

document.addEventListener('DOMContentLoaded', function () {
    const ta = new TextAnimation('.animate-title');    
});

class TextAnimation {
    constructor(el) {
        this.el = document.querySelector(el);
        this.chars = this.el.innerHTML.trim().split("");
        this.el.innerHTML = this._splitText();
    }
    _splitText() {
        return this.chars.reduce((acc, curr) => {
            curr = curr.replace(/\s+/, '&nbsp;');
            return `${acc}<span class="char">${curr}</span>`;
        }, "");
    }
}


この記事が気に入ったらサポートをしてみませんか？