この記事では、コードレイン特殊効果を実現するための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 を実行する手順
MySQL 開発チームは、2019 年 10 月 14 日に MySQL 8.0.18 GA バージ...
このコマンドは、データ テーブル ff_vod を変更し、vod_url フィールドの内容の後に 9...
Dockerの概要Docker はオープンソースのソフトウェア展開ソリューションです。 Docker...
実際、これは非常に簡単です。imgにaタグを追加し、 <a href='tencent...
データベースインデックスについては皆さんもよくご存知だと思います。 インデックスは、データベース テ...
目次序文ドローコールとはDrawCall はパフォーマンスにどのような影響を与えますか?ドローコール...
Tencent Cloud上に構築されたMySQLは、開発用コンピュータでNavicatを使用して...
1 Linuxディストリビューションのバージョンを確認する[root@typecodes ~]# c...
<marquee> タグはペアで表示されるタグです。最初のタグ <marquee...
Vue ルーティング this.route.push ジャンプ ページが更新されない1. 背景概要:...
url-loader をダウンロード 糸を追加 -D URLローダー モジュール: { ルール: {...
カテゴリ選択を選択します。テストの結果、IE と FF はこの要素を適切にサポートできることがわかり...
目次サンプルコードレンダリングコード分析要約するサンプルコード var データ = [220, ...
目次1. はじめに2. コンポーネント開発1. コンポーネントの構成2. ヘッダーコンポーネントの開...
冒頭にこう書かれています:アブソリュートは言った。「親戚よ、私はあなたを私の人生で見たくない!」なぜ...