jquery テキストのモーション

Question

http://tha.jp/works
の写真にホバーした際に動くテキストの動きは
どのように実現されているのでしょうか？

bundle.jsで動いているようですが中身を見てもちょっとどういう仕組みかわからず・・
他サイトでカスタマイズして使用したいのですが
どなたかおわかりになりますでしょうか？？

Answer 1

動きさえなんとなくエミュレートすれば自力で書けそうですよね
超てきとーに書いてみました

<script>
$(function(){
  var flgs={};
  var rnd=setArr();
  function setArr(){
    var arr=[];
    arr=arr.concat(Array(10).fill(null).map(function(x,y){return String.fromCharCode(y+48);}));
    arr=arr.concat(Array(26).fill(null).map(function(x,y){return String.fromCharCode(y+65);}));
    arr=arr.concat(Array(26).fill(null).map(function(x,y){return String.fromCharCode(y+97);}));
    return arr;
  }
  $('.hoge').on('mouseover',function(){
    var targetid=$(this).data('target');
    var target=$('#'+targetid);
    if(!flgs[targetid]){
      flgs[targetid]=true;
      target.data('text',target.text()).html('~'.repeat(target.text().length));
      var cnt=0;
      var speed=1.5;
      var timerId=setInterval(function(){
        var len=target.data('text').length;
        var offset=parseInt(cnt/len/speed);
        var txt=target.data('text').substr(0,offset)+rnd[parseInt(rnd.length*Math.random())]+'~'.repeat(len-offset);
        target.html(txt);
        cnt++;
        if(parseInt(cnt/len/speed) > len){
          flgs[targetid]=false;
          target.html(target.data('text'));
          clearInterval(timerId);
          }
      },1);
    }
  });
});
</script>
<img src="" width=200 height=200 alt="test" class="hoge" data-target="fuga"><br>
<span id="fuga">this is a pen</span><br>
<img src="" width=200 height=200 alt="test" class="hoge" data-target="piyo"><br>
<span id="piyo">i am a chanpion</span>

Comments

[cheche0830]

すごい。。。
ここまでかいていただいてありがとうございます！！
参考にさせて頂きます！