この記事では、コードレイン特殊効果を実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Docker コンテナで ASP.NET Core を実行する手順
JD カルーセルは、動的な効果を追加せず、主に位置決めの知識を使用して、純粋な HTML と CS...
目次設定を追加json 構成レイヤー構成の表示論理層の構成位置追跡をオンにする録音を開始開始座標を決...
ツリーマップは主にツリーのようなデータ構造を視覚化するために使用され、特殊なタイプの階層です。これを...
1. 時間の種類は次のように分けられます。 1. ネットワーク時間(タイムゾーンの設定、ntpサーバ...
今日午後ずっと私を悩ませたバグを記録する半月前から始めましょう。それから.................
目次1. copy_{to,from}_user() とは何か1. copy_{to,from}_u...
1. 要件の説明Divタグの右上隅に削除アイコンを表示します2. 実装html、CSS 3. 参照コ...
目次序文1. クロージャとは何ですか? 1.1 クロージャは条件コードを満たす1.2 クロージャ生成...
各浮動小数点型のストレージ サイズと範囲は、次の表に示されています。タイプサイズ範囲(符号付き)範囲...
この記事では、テーブルの作成、フィールドの追加、フィールドの変更、インデックスの追加を行う一般的な ...
データのバックアップと復元に関する最初の記事を皆さんに共有します。具体的な内容は次のとおりです。基本...
序文最近、小さなプログラムでリアルタイムにチャートを更新するという要件に遭遇しました。最初は wx-...
1. 矢印関数1. 矢印関数自体はこれをバインドしないという事実を利用します。 2. render(...
テキスト非表示コード、HTML 内の特定のテキストを非表示にするコードをコピーコードは次のとおりです...
この記事では、MySQL 5.7.21のインストールとインストール中に発生した問題を参考までに紹介し...