取得し、戻す

Web

テキストを動的に取得し、変更する

swiperでスライドの中のテキストを動的に扱いたかったので、色々やってみた話。発見があったので、メモ。スライドした後にアニメーションを加える形を実現したい、しかし、スライド毎のテキストを自由に書き換えたい。力技でやるなら、全ての文字にspanを手動で加える形になりますが、テキストに修正が入ったら、それはそれで面倒な事態になります。そこで動的にspanを付与できる形を目指しました。鮭のふ化のようなイメージで、川でとって、(繁殖)、餌を与えて、川にリリースします。

実装はそれほど難しくなく、文字(鮭)を取得し、span(餌)を与えて、spanがついた文字(育った鮭)を戻すだけ。あとは、swiperのアクションにあわせて、cssで操作。.swiper-slide-activeが付与されたタイミングでアニメーションを発動します。jsは粗があるかもしれませんが、これを使うと更新が少し楽になりました。

//複数あるテキスト群を全部取得  
const texts = document.querySelectorAll('.inner__txt')

//各テキスト群を一つづつ処理
for (let i = 0; i < texts.length; i++) {
 //文字をtextObjに入れる
 let textObj = texts[i].innerHTML
 //textArrayに各文字を配列型式で入れる
 let textArray = [...textObj]
 //ダブルのを防ぐため、文字が入っていたところは消去
 texts[i].innerHTML = ''

 //配列の文字を一つづつ処理
 textArray.forEach((item, index) => {
  //spanを作成
  const elm = document.createElement('span')
  //class名を付与
  elm.className = 'anime__txt'
  //spanの中に、念のためスケープした文字を入れる
  elm.innerHTML = escapeHtml(item)
   //文字ごとのアニメーションにしたかったので、挿入。お好みで
   elm.style.transitionDelay = `${0.2 + index * 0.05}s`
   //文字をとってきた場所にリリース
   texts[i].appendChild(elm)
  })
}
//from MDN
function escapeHtml(str) {
  str = str.replace(/&/g, '&');
  str = str.replace(/</g, '<');
  str = str.replace(/>/g, '>');
  str = str.replace(/"/g, '"');
  str = str.replace(/'/g, ''');
  return str;
}
.inner__txt {
 .anime__txt {
  opacity: 0;
  transition: all 1s;
 }
}

&.swiper-slide-active {
 .inner__txt {
  .anime__txt {
   opacity: 1;
  }
 }
}

コメント