コードレイン効果を実現するjQueryプラグイン

この記事では、コードレイン特殊効果を実現するためのjQueryプラグインの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

コードレイン効果

大まかなアイデアを提供します。効果はターゲットとは異なりますが、そこから学習して対応する効果に変更するのは簡単です。

効果は以下のとおりです

コードセクション

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <title>コードの雨を降らせる</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <スタイル>
   *{
    マージン: 0px;
    パディング: 0px;
    ユーザー選択:なし;
   }
   #div{
    位置: 固定;
    上: 0px;
    下: 0px;
    左: 0px;
    右: 0px;
    背景色: 黒;
    zインデックス: 1;
   }
   。アイテム{
    フォントサイズ: 12px;
    位置: 絶対;
    上: 0px;
    下: 0px;
    色: #2ecc71;
    -webkit-writing-mode:垂直方向のlr;
    /* アニメーション: 0.9 秒下向き線形; */
   }
   /* アニメーションフレームを描画 */
   @キーフレームダウン{
    から{}
    に{
     不透明度: 0;
     上: 100%;
    }
   }
  </スタイル>
 </head>
 <本文>
  <div id="div">
  </div>
 </本文>
</html>
<スクリプト>
 var count = 15 // 1 回に生成されるレコードの数 var time = 200 // 更新間隔 var num = 15 // 最大で生成される文字数 var span = 1000 // 各データのアニメーション効果の持続時間 var tdown = 900 // 各アニメーションの最大持続時間 $(document).ready(function(){
  setInterval(関数(){
   for(var i = 0;i<count;i++){
    var str = getchar(num) // 文字化けした文字をランダムに生成する drawitem(str) // DOM をランダムに生成し、アニメーション効果を与える }
  }、時間）
 })
 関数drawitem(str){
  var op = parseFloat((Math.random()*1).toFixed(2)); //初期の透明度 var top = Math.floor(Math.random()*100) //初期の高さ var left = Math.floor(Math.random()*100) //初期の左距離 var $item = $("<div class='item'>"+str+"</div>");
  $item.appendTo($("#div"));
  var tspan = parseFloat(Math.floor(Math.random()*tdown)/1000)
  tspan=tspan<=0.5?0.5:tspan
  $item.css({
   'トップ':トップ+'%',
   '左':左+'%',
   '不透明度':op,
   'アニメーション':'下 '+tspan+'s リニア'
  })
  
  setTimeout(関数(){
   アイテムを削除します。
  }、スパン）
 }
 function getchar(num){//ランダムな文字の束を生成します num=num==undefined?1:Math.floor(Math.random()*num);
  var str = "";
  for(var i = 0;i<num;i++){
   var n = Math.floor(Math.random()*256)
   n =String.fromCharCode(n);
   str+=n;
  }
  str を返します。
 }
</スクリプト>

アイデアの説明

コード内にコメントがある

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: