CSS3はシームレスなスクロールと手ぶれ防止を実現します

CSS3はシームレスなスクロールと手ぶれ防止を実現します

質問

画像とテキストのシームレスなスクロールは、一般的に携帯電話では良い効果をもたらしますが、一部のモバイル ブラウザーでは画像がひどく揺れてしまいます。

間違った書き方

次のように left または margin-left を使用することはできません。

.donghua.active{
  アニメーション: スクロール、イーズインアウト、1 秒、無限、交互に;
  -webkit-animation: スクロールのease-in-out 1秒無限交互;
}
@keyframes スクロール {
  から {
    左: 0;
  }
  に {
    左: -353px;
  }
}
-webkit-@keyframes スクロール {
  から {
    左: 0;
  }
  に {
    左: -353px;
  }
}

回避策

モバイル フォンでは、要素がひどく揺れます。次のように 2D 変換を使用します。

.donghua.active{
  アニメーション: スクロール、イーズインアウト、1 秒、無限、交互に;
  -webkit-animation: スクロールのease-in-out 1秒無限交互;
}
@keyframes スクロール {
  0% {
    変換: translate(0px, 0px);
  }

  100% {
    変換: translate(0px, -353px);
  }
}
@-webkit-keyframes スクロール {
  0% {
    変換: translate(0px, 0px);
  }

  100% {
    変換: translate(0px, -353px);
  }
}

以上が、CSS3 を使ってシームレススクロールと手ぶれ防止を実現する方法の詳細です。CSS3 シームレススクロールと手ぶれ防止の詳細については、123WORDPRESS.COM の他の関連記事にも注目してください。

<<:  FirefoxでCookieとお気に入りをインポートおよびエクスポートする方法

>>:  JavaScript オブジェクトからプリミティブ値への変換の詳細な説明

推薦する

Vue Element フロントエンドアプリケーション開発 従来の Element インターフェースコンポーネント

目次1. リストインターフェースとその他のモジュールの表示処理2. 従来のインターフェースコンポーネ...

Vue2で配列の変更を検出できない理由と解決策

目次回避策Vue2.0 で 2 つの配列の変更を監視できないのはなぜですか?ソースコード分析ヴュー3...

MySQLでインデックスエラーが発生する状況について簡単に説明します

以下に、トレーニング機関からのヒントと私自身の要約をいくつか示します。以下のインデックスの内容を説明...

HTML+CSS をベースにした素敵なフリップログインおよび登録インターフェースを作成します

素敵なフリップログインと登録インターフェースを作成する序文最近、ネットワーク ディスクを構築しようと...

Dockerボリュームコンテナ間のデータ共有の実装

ボリュームとは何ですか?ボリュームは英語で容量を意味し、Docker ではデータ ボリューム、つまり...

CSSアニメーションでポイント獲得効果を実現するアイデアを詳しく解説

最近のプロジェクトでは、ポイントを集める効果を作成する必要があります。 ボスの説明によると、この効果...

MySQL 接続数を設定する方法 (接続数が多すぎる)

mysql使用中に接続数が超過していることが判明しました~~~~ [root@linux-node...

VMware仮想マシンにdeepin20をインストールする最も完全で詳細なプロセス

仮想マシンソフトウェア: VMware Workstationイメージ: deepin-deskto...

垂直グリッドと漸進的な行間隔の例

新しい質問急いで来て、急いで行ってください。 「垂直グリッドとプログレッシブ行間隔 (パート 1)」...

スローモーションアニメーション効果を実現するJavaScript

この記事では、スローモーションアニメーション効果を実現するためのJavaScriptの具体的なコード...

Dockerを使用して外部からアクセス可能なMySQLを構築する詳細な説明

MySQL 8.0をインストールする docker run -p 63306:3306 -e MYS...

JavaScript を使用したコマンドライン アプリケーションの構築

目次1. ノードをインストールする2. Commander.jsをインストールする3. JavaSc...

Linux で Grafana をインストールし、InfluxDB モニタリングを追加する方法

Grafana をインストールします。公式 Web サイトでは、直接インストールできる Ubuntu...

MySQLのさまざまなロックの概念的理解

楽観的ロック楽観的ロックは、主にデータ バージョン記録メカニズムに基づいて実装され、通常はデータベー...

モバイルデバイスで 1 ピクセルの境界線の問題を解決するいくつかの方法 (5 つの方法)

この記事では、モバイルデバイス上の 1 ピクセルの境界線の問題を解決する 5 つの方法を紹介します。...