大画面のデジタル スクロール効果は、最近の作業における大画面 UI ダイアグラムから生まれました。UI ダイアグラムには、数字が上にめくれる効果を持たせる必要があるモジュールがあります。以下は、最終的に実現された効果です。 アイデア この効果を達成する前に、アイデアを整理し、マインドマップを使用して実装手順を次のように設計しましょう。 初期実装 要素を検査したり、デジタル背景画像をダウンロードしたりできます 上記の設計プロセスで、まずはシンプルに実装してみましょう
<div class="box"> <p class="box-item"> <span>1</span> </p> </div> キー .ボックスアイテム{ 位置: 相対的; 表示: インラインブロック; 幅: 54px; 高さ: 82px; /* 背景画像 */ 背景: url(./number-bg.png) 繰り返しなし 中央 中央; 背景サイズ: 100% 100%; フォントサイズ: 62px; 行の高さ: 82px; テキスト配置: 中央; } 上記のコードを実装すると、その効果は次のようになります。 考えてみましょう: 背景ボックスに数字が表示されたら、次に考えてみましょう。背景ボックスのテキストは
リアルタイム効果は以下のとおりです。 上記のインスピレーションに基づいて、次の効果を達成できます。 <p class="box-item"> 0123456789 </p> .ボックスアイテム{ 表示: インラインブロック; 幅: 54px; 高さ: 82px; 背景: url(./number-bg.png) 繰り返しなし 中央 中央; 背景サイズ: 100% 100%; フォントサイズ: 62px; 行の高さ: 82px; テキスト配置: 中央; /* 新しく追加されたコード */ 位置: 相対的; 書き込みモード: 垂直方向 (左) テキストの向き: 直立; /* オーバーフロー: 非表示; */ } /* 新しく追加されたコード */ .box-item スパン { 位置: 絶対; 上: 10px; 左: 50%; 変換: translateX(-50%); 文字間隔: 10px; } スクロールを計算する 数字を 答えは:下にスクロール 他の数字はどうですか? 特別な実装のおかげで、各桁のローリング距離の一般的な公式が存在します。 変換: `translate(-50%,-${number * 10}%)` 上記の式を使用して、数字を .box-item スパン { 位置: 絶対; 上: 10px; 左: 50%; 変換: translate(-50%,-50%); 文字間隔: 10px; } スクロールアニメーションの実装 各数字の特定の転がり距離がわかったら、数字がランダムに転がるように設計してみましょう。 以下は具体的なランダムスクロール コード: 間隔を設定する(() => { 数値 = document.getElementById('数値') とします。 ランダム = getRandomNumber(0,10) とします。 number.style.transform = `translate(-50%, -${random * 10}%)` }, 2000) 関数 getRandomNumber (最小値, 最大値) { Math.floor(Math.random() * (max - min + 1) + min) を返します。 } これまでのところ、デジタルスクロール効果は初期段階で実現されています。次のセクションでは、ビジネスニーズに合わせてこの効果を徐々に改善していきます。 完了 前のセクションでは、スクロール効果の初期段階を完了しました。このセクションでは、初期のマインドマップに基づいて、一般的な パラメータの受け入れ このコンポーネントは数値パラメータのみを受け入れます。これは 小道具: { 番号: { タイプ: 数値、 デフォルト: 0 } } 充填 ビジネス上のニーズにより、最大桁数は 定数MAX_LEN = 8 渡された桁数が この部分のコードはより一般的なので、スペースを節約するためにコードは表示されません。関連する js コードを自分で記述できます。 レンダリング 上記のパディング文字列を文字配列に分割し、ページ上にレンダリングします。 computeNumber: は文字配列です。例: ['0','0',','0','0','0',','9','1','7'] コードの <ul> <li :class="{'数値項目': !isNaN(項目) }" v-for="(item,index) in computeNumber" :key="インデックス" > <span v-if="!isNaN(item)"> <i ref="numberItem">0123456789</i> </span> <span v-else>{{item}}</span> </li> </ul> .数値項目 { 幅: 50px; 背景: url(./number-bg.png) 繰り返しなし 中央 中央; 背景サイズ:100% 100%; & > スパン { 位置: 相対的; 表示: インラインブロック; 右マージン: 10px; 幅: 100%; 高さ: 100%; 書き込みモード: 垂直方向; テキストの向き: 直立; オーバーフロー: 非表示; & > 私 { 位置: 絶対; 上: 0; 左: 50%; 変換: translate(-50%,0); 遷移: transform 0.5s イーズインアウト; 文字間隔: 10px; } } } ページレンダリング効果: ランダムな数字の増加、世論調査効果のシミュレーション ページがレンダリングされたら、数字をスクロールさせてみましょう。次の 2 つのメソッドを設計します。increaseNumber //時間指定増加数 increaseNumber() { 自分 = これ this.timer = setInterval(() => { 自己.newNumber = 自己.newNumber + getRandomNumber(1, 100) 自己.setNumberTransform() }, 3000) }, // 各桁のオフセットを設定する setNumberTransform () { numberItems = this.$refs.numberItem とします。 numberArr = this.computeNumber.filter(item => !isNaN(item)) とします。 for (let index = 0; index < numberItems.length; index++) { elem = numberItems[index]とします。 elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)` } } 最終的な効果: 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: 「さらに表示」ボタンによる複数行テキストの切り捨てに関する考察
目次問題の説明:原因分析:解決:補足: Reactでは、フックが使用されている場合、useState...
目次序文コンポーネントの紹介クラスコンポーネントの作成状態についてレンダリングについて関数コンポーネ...
私は最近 Linux を学び始めました。Ma Ge の umask に関する Linux コースを読...
目次ポート関連の概念:ポートとサービスの関係1: nmapツールが開いているポートを検出する2: n...
必要:通常、サイト側は、ウェブサイト上の動画や写真が盗まれるのを防ぎたいと考えています。結局のところ...
目次1. Nginx の紹介1. Nginx とは何ですか? 2. Nginx を使用する理由3. ...
この記事では、シンプルなカルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹...
目次要約する要約する配列が変更されると、対応するデータを動的にロードしますシナリオ: 異なるコンポー...
1. Dockerコンテナ間の相互接続Docker は現在、軽量の仮想化ソリューションとなっています...
目次1.DB、DBMS、SQL 2. データベースの特徴3. SQL分類4. MySQLを起動および...
Rownum は、Oracle での独自の書き込み方法です。Oracle では、rownum を使用...
みなさんこんにちは。今日はv-modelを使って親子コンポーネントのバインディング効果を実現する方法...
目次日時タイムスタンプ選び方ミリ秒の時間を保存する方法結論MySQL は、日付と時刻を処理するために...
目次1. 準備2. 展開プロセス3. アクセステストHalo は、ブログに慣れている学生に追加のオプ...
この記事では、シンプルなカルーセル効果を実現するためのjsの具体的なコードを参考までに紹介します。具...