このような大画面のデジタルスクロール効果が必要になる場合があります

このような大画面のデジタルスクロール効果が必要になる場合があります

大画面のデジタル スクロール効果は、最近の作業における大画面 UI ダイアグラムから生まれました。UI ダイアグラムには、数字が上にめくれる効果を持たせる必要があるモジュールがあります。以下は、最終的に実現された効果です。

アイデア

この効果を達成する前に、アイデアを整理し、マインドマップを使用して実装手順を次のように設計しましょう。

初期実装

要素を検査したり、デジタル背景画像をダウンロードしたりできます

上記の設計プロセスで、まずはシンプルに実装してみましょう

html構造

<div class="box">
  <p class="box-item">
    <span>1</span>
  </p>
</div>

キーcss

.ボックスアイテム{
  位置: 相対的;
  表示: インラインブロック;
  幅: 54px;
  高さ: 82px;
  /* 背景画像 */
  背景: url(./number-bg.png) 繰り返しなし 中央 中央;
  背景サイズ: 100% 100%;
  フォントサイズ: 62px;
  行の高さ: 82px;
  テキスト配置: 中央;
}

上記のコードを実装すると、その効果は次のようになります。

考えてみましょう: 背景ボックスに数字が表示されたら、次に考えてみましょう。背景ボックスのテキストは0-9の数字である必要があります。上記のhtml構造を崩さずに数字をスクロールさせるにはどうすればよいでしょうか。この時点で、私たちの爪はCSSプロパティであるwriting-modeに届きます。そのプロパティの概要は次のとおりです。

  • horizo​​n-tb: デフォルト値。上から下への水平レイアウトを示します。
  • vertical-lr: 左から右への垂直レイアウトを示します。
  • vertical-rl: 右から左への垂直レイアウトを示します。

リアルタイム効果は以下のとおりです。

上記のインスピレーションに基づいて、次の効果を達成できます。

html変更:

<p class="box-item">
  0123456789
</p>

cssの変更:

.ボックスアイテム{
  表示: インラインブロック;
  幅: 54px;
  高さ: 82px;
  背景: url(./number-bg.png) 繰り返しなし 中央 中央;
  背景サイズ: 100% 100%;
  フォントサイズ: 62px;
  行の高さ: 82px;
  テキスト配置: 中央;

  /* 新しく追加されたコード */
  位置: 相対的;
  書き込みモード: 垂直方向 (左)
  テキストの向き: 直立;
  /* オーバーフロー: 非表示; */
}
/* 新しく追加されたコード */
.box-item スパン {
  位置: 絶対;
  上: 10px;
  左: 50%;
  変換: translateX(-50%);
  文字間隔: 10px;
}

スクロールを計算する

数字を5にしたい場合、どのくらいにすればよいでしょうか?

答えは:下にスクロール-50%

他の数字はどうですか?

特別な実装のおかげで、各桁のローリング距離の一般的な公式が存在します。

変換: `translate(-50%,-${number * 10}%)`

上記の式を使用して、数字を5までロールすると、その効果は次のようになります。

cssの変更:

.box-item スパン {
  位置: 絶対;
  上: 10px;
  左: 50%;
  変換: translate(-50%,-50%);
  文字間隔: 10px;
}

スクロールアニメーションの実装

各数字の特定の転がり距離がわかったら、数字がランダムに転がるように設計してみましょう。

以下は具体的なランダムスクロールjsです

コード:

間隔を設定する(() => {
  数値 = document.getElementById('数値') とします。
  ランダム = getRandomNumber(0,10) とします。
  number.style.transform = `translate(-50%, -${random * 10}%)`
}, 2000)
関数 getRandomNumber (最小値, 最大値) {
  Math.floor(Math.random() * (max - min + 1) + min) を返します。
}

これまでのところ、デジタルスクロール効果は初期段階で実現されています。次のセクションでは、ビジネスニーズに合わせてこの効果を徐々に改善していきます。

完了

前のセクションでは、スクロール効果の初期段階を完了しました。このセクションでは、初期のマインドマップに基づいて、一般的なVueビジネス コンポーネントを設計します。

パラメータの受け入れ

このコンポーネントは数値パラメータのみを受け入れます。これはVueコンポーネントのpropsに設定されます。

小道具: {
  番号: {
    タイプ: 数値、
    デフォルト: 0
  }
}

充填

ビジネス上のニーズにより、最大桁数は8なので、定数を定義します。

定数MAX_LEN = 8

渡された桁数が8未満の場合は、 0で埋める必要があります。 0で埋めた後、金額の形式に変換する必要もあります。

この部分のコードはより一般的なので、スペースを節約するためにコードは表示されません。関連する js コードを自分で記述できます。

レンダリング

上記のパディング文字列を文字配列に分割し、ページ上にレンダリングします。

computeNumber: は文字配列です。例: ['0','0',','0','0','0',','9','1','7']

コードのhtml部分:

<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>

cssパーツコード:

.数値項目 {
  幅: 50px;
  背景: url(./number-bg.png) 繰り返しなし 中央 中央;
  背景サイズ:100% 100%;
  & > スパン {
    位置: 相対的;
    表示: インラインブロック;
    右マージン: 10px;
    幅: 100%;
    高さ: 100%;
    書き込みモード: 垂直方向;
    テキストの向き: 直立;
    オーバーフロー: 非表示;
    & > 私 {
      位置: 絶対;
      上: 0;
      左: 50%;
      変換: translate(-50%,0);
      遷移: transform 0.5s イーズインアウト;
      文字間隔: 10px;
    }
  }
}

ページレンダリング効果:

ランダムな数字の増加、世論調査効果のシミュレーション

ページがレンダリングされたら、数字をスクロールさせてみましょう。次の 2 つのメソッドを設計します。increaseNumber increaseNumberVueライフサイクルのmounted関数で呼び出す必要があります。

//時間指定増加数 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 を応援していただければ幸いです。

<<:  「さらに表示」ボタンによる複数行テキストの切り捨てに関する考察

>>:  MySQL infobrightのインストール手順

推薦する

React 純粋関数コンポーネント setState がページ更新を更新しない問題の解決方法

目次問題の説明:原因分析:解決:補足: Reactでは、フックが使用されている場合、useState...

Reactでコンポーネントを作成する方法

目次序文コンポーネントの紹介クラスコンポーネントの作成状態についてレンダリングについて関数コンポーネ...

Linux での umask の使用に関する詳細な説明

私は最近 Linux を学び始めました。Ma Ge の umask に関する Linux コースを読...

Linux サーバーは最大いくつのポートを開くことができますか?

目次ポート関連の概念:ポートとサービスの関係1: nmapツールが開いているポートを検出する2: n...

Nginx でアンチホットリンクを設定するための手順を完了する

必要:通常、サイト側は、ウェブサイト上の動画や写真が盗まれるのを防ぎたいと考えています。結局のところ...

Nginx サービス クイック スタート チュートリアル

目次1. Nginx の紹介1. Nginx とは何ですか? 2. Nginx を使用する理由3. ...

シンプルなカルーセルの最も完全なコード分析を実装するJavaScript(ES6オブジェクト指向)

この記事では、シンプルなカルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹...

Vueコンポーネントの動的コンポーネントの詳細な説明

目次要約する要約する配列が変更されると、対応するデータを動的にロードしますシナリオ: 異なるコンポー...

Dockerコンテナ相互接続の予備的な実践についての簡単な説明

1. Dockerコンテナ間の相互接続Docker は現在、軽量の仮想化ソリューションとなっています...

MySQL 学習データベースバックアップの詳細な説明

目次1.DB、DBMS、SQL 2. データベースの特徴3. SQL分類4. MySQLを起動および...

Oracle Rownum 書き込みに似た MySQL の詳細な例

Rownum は、Oracle での独自の書き込み方法です。Oracle では、rownum を使用...

Vue における v-model を使用したクロスコンポーネントバインディングの基本的な実装方法

みなさんこんにちは。今日はv-modelを使って親子コンポーネントのバインディング効果を実現する方法...

MySQL の時間タイプの選択

目次日時タイムスタンプ選び方ミリ秒の時間を保存する方法結論MySQL は、日付と時刻を処理するために...

Dockerを使用してブログサイトを素早く構築する方法の詳細な説明

目次1. 準備2. 展開プロセス3. アクセステストHalo は、ブログに慣れている学生に追加のオプ...

jsを使用してシンプルなカルーセル効果を実現する

この記事では、シンプルなカルーセル効果を実現するためのjsの具体的なコードを参考までに紹介します。具...