参考サイトをもとに文字をシャッフル表示させたい

Question

参考サイト

上記の参考サイトをもとに文字をシャッフル表示させたいのですが、上記のものは一番上の文字列のみに適応されるみたいで、二文目以降は動作しません…

二文目以降も動作させるにはどのように変更すればいいのでしょうか？

Shuffle Letters Effectというプラグインの使用も試みたのですが、こちらは他のjsのコードを書いていると動かなくなってしまい、うまく使用できませんでした。

お手伝いいただけると幸いです。

Answer 1

2行目にもclassを追加します。

<p class="shuffle">mouseover: Shuffle</p>

JSは最後の部分を以下のようにすればいけるでしょう。

var el = document.querySelectorAll('.shuffle');    // Allにする
//var st = new ShuffleText(el)

el.forEach(function(elem){
	elem.addEventListener("mouseover", function() {
		var st = new ShuffleText(elem);
		st.shuffle();
	});
});

追記 :
ページ読み込み時にシャッフルさせたい場合は以下のようになります。（mouseoverと併記でも動きます。）

window.addEventListener('load',function(){
    el.forEach(function(elem){
        var st = new ShuffleText(elem);
        st.shuffle();
    });		
});

Comments

[_mini]

ありがとうございます。

こちらの参考サイトではmouseover時にもシャッフル表示がなされているのですが、最初のロード時のみでシャッフル表示を行いたい場合は一番下のmouseoverのfunctionを消せばよいのでしょうか？

[_mini]

回答遅くなりすみません。
loadファンクションで動き確認できました。
100vhスクロールした際や特定要素をクリックした際に発火するようにするにはloadやmouseoverの部分をclickなどに変えて書き足せば動くのでしょうか？

[cerfweb]

どのタイミングでとかどこをクリックしたらとかはそのようにeventListenerを書けばいいだけのことなので、まずはJavaScriptのaddEventListenerの使い方を学べばその点はクリアできると思いますよ。

[_mini]

ありがとうございます。
その部分を勉強してみたいと思います！