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

コードレイン効果を実現する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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JS+CSS+HTML はマトリックスのテキストの落下効果に似た「コードの雨」を実現します
  • HTML+JS で「コードレイン」効果 (マトリックステキスト落下効果) のソースコードを実現
  • canvas+gif.js を使用して独自のデジタル雨アバターを作成するためのサンプル コード

<<:  Docker コンテナで ASP.NET Core を実行する手順

>>:  MySQLのレプリケーションの詳細な分析

推薦する

JDカルーセル効果を実現するための純粋なHTMLとCSS

JD カルーセルは、動的な効果を追加せず、主に位置決めの知識を使用して、純粋な HTML と CS...

WeChatアプレットがユーザーの移動軌跡を記録

目次設定を追加json 構成レイヤー構成の表示論理層の構成位置追跡をオンにする録音を開始開始座標を決...

ツリー チャートの実装方法に関する Echarts チュートリアル

ツリーマップは主にツリーのようなデータ構造を視覚化するために使用され、特殊なタイプの階層です。これを...

Linux システムにおける時間設定の概要

1. 時間の種類は次のように分けられます。 1. ネットワーク時間(タイムゾーンの設定、ntpサーバ...

システム エラー 1067 のため、MySQL 5.6 解凍バージョン サービスを開始できません

今日午後ずっと私を悩ませたバグを記録する半月前から始めましょう。それから.................

Linux カーネルの copy_{to, from}_user() に関する考察

目次1. copy_{to,from}_user() とは何か1. copy_{to,from}_u...

HTML+CSS で div タグの右上隅に削除アイコンを追加するサンプルコード

1. 要件の説明Divタグの右上隅に削除アイコンを表示します2. 実装html、CSS 3. 参照コ...

Javascriptのクロージャとアプリケーションの詳細な説明

目次序文1. クロージャとは何ですか? 1.1 クロージャは条件コードを満たす1.2 クロージャ生成...

MySQL の 3 つの浮動小数点型 (float、double、decimal) の違いと概要について簡単に説明します。

各浮動小数点型のストレージ サイズと範囲は、次の表に示されています。タイプサイズ範囲(符号付き)範囲...

テーブルの作成、フィールドの追加、フィールドの変更、インデックスの追加によく使用される MySQL の SQL 文の概要

この記事では、テーブルの作成、フィールドの追加、フィールドの変更、インデックスの追加を行う一般的な ...

史上最もシンプルな MySQL データのバックアップと復元のチュートリアル (パート 1) (パート 35)

データのバックアップと復元に関する最初の記事を皆さんに共有します。具体的な内容は次のとおりです。基本...

WeChatアプレット+EChartsで動的更新プロセス記録を実現

序文最近、小さなプログラムでリアルタイムにチャートを更新するという要件に遭遇しました。最初は wx-...

Reactでのイベントバインディングの実装は3つの方法を指しています

1. 矢印関数1. 矢印関数自体はこれをバインドしないという事実を利用します。 2. render(...

HTML で特定のテキストを非表示にするにはどうすればよいでしょうか?

テキスト非表示コード、HTML 内の特定のテキストを非表示にするコードをコピーコードは次のとおりです...

win10 での mysql5.7.21 の詳細なインストール手順

この記事では、MySQL 5.7.21のインストールとインストール中に発生した問題を参考までに紹介し...