文字がランダムで、切り替わるサンプル

文字がランダムな配列から正しい文字列に並び変わるのを前に自分で作った

AADA

のマウスオーバーみたいのです

何度も作るの面倒なので、メモがてら書きます。

まず

h2タグを対象として、マウスオーバーの時に連続したりすると、文字列がランダムのままになってしまったりするので、まずは正しい内容を属性タグなどに移動をします（今回はrelに）

***.js

$('h2').attr("rel",$('h2').text());

次に、ランダムな文字列を用意します。

***.js

var _arr = ["q","w","e","r","t","y","u","i","o","p","a","s","d","f","g","h","j","k","l","z","x","c","v","b","n","m"]

これは単純に英語の小文字のランダムなのですが"1","2"とかにすると数字の値のランダムが作れたり、

***.js

var _arr = ["ご","み"]

ってすると「ごみみごごごごみみみ」みたいになったりします。

使う関数は

***.js

function randam(word,target){
  target.text(randget(word.length));
  var _num = 0;
  var _si = setInterval(function(){
    _num++;
    var _str = word.substr(0, _num);
    _str += randget(word.length-_num);
    target.text(_str);
    if(_num == word.length){
      clearInterval(_si);
    }
  },50);
}

function randget(_num){
  var _str = "";
  for(var i = 0 ; i < _num ; i++){
    _str += _arr[Math.floor(_arr.length*Math.random())];
  }
  return _str;
}

これを使う時は

***.js

randam($('h2').attr("rel"),$('h2'));

だけです。

まとめ

クラスにするほど複雑じゃないけど、
ゼロから書くほど単純でもないので、コピペで使えると楽でよいなって思います。

ご利用は自己責任で！