コードレイン効果を実現する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のレプリケーションの詳細な分析

推薦する

MySQL 8.0 の新機能: ハッシュ結合

MySQL 開発チームは、2019 年 10 月 14 日に MySQL 8.0.18 GA バージ...

MySQLは既存のコンテンツを保持し、後でコンテンツを追加します

このコマンドは、データ テーブル ff_vod を変更し、vod_url フィールドの内容の後に 9...

Dockerコンテナの紹介

Dockerの概要Docker はオープンソースのソフトウェア展開ソリューションです。 Docker...

データベースのインデックス作成に関する知識ポイントのまとめ。必要な情報はすべてここにあります。

データベースインデックスについては皆さんもよくご存知だと思います。 インデックスは、データベース テ...

CocosCreator最適化DrawCallの詳細な説明

目次序文ドローコールとはDrawCall はパフォーマンスにどのような影響を与えますか?ドローコール...

MySqlは、外部ネットワーク接続クライアントの低速問題を解決するためにskip-name-resolveを使用します。

Tencent Cloud上に構築されたMySQLは、開発用コンピュータでNavicatを使用して...

Centos7.3 に mysql5.7.18 をインストールするための詳細なチュートリアル

1 Linuxディストリビューションのバージョンを確認する[root@typecodes ~]# c...

HTMLのマーキータグは、シームレスなスクロールマーキー効果を実現します。

<marquee> タグはペアで表示されるタグです。最初のタグ <marquee...

Vue ルーティング this.route.push ジャンプ ページが更新されない場合の解決策

Vue ルーティング this.route.push ジャンプ ページが更新されない1. 背景概要:...

webpack イメージを base64 に変換する例

url-loader をダウンロード 糸を追加 -D URLローダー モジュール: { ルール: {...

HTML チュートリアル、optgroup 要素の理解

カテゴリ選択を選択します。テストの結果、IE と FF はこの要素を適切にサポートできることがわかり...

eCharts でパーセンテージ付きの横棒グラフを実装する方法

目次サンプルコードレンダリングコード分​​析要約するサンプルコード var データ = [220, ...

Vue3コンポーネントの開発詳細

目次1. はじめに2. コンポーネント開発1. コンポーネントの構成2. ヘッダーコンポーネントの開...

CSSの絶対と相対について

冒頭にこう書かれています:アブソリュートは言った。「親戚よ、私はあなたを私の人生で見たくない!」なぜ...