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 オブジェクトからプリミティブ値への変換の詳細な説明

推薦する

MycliはMySQLコマンドライン愛好家にとって必須のツールです

マイクリMyCLI は、自動補完と構文の強調表示を備えた MySQL、MariaDB、および Per...

カルーセル効果を書くためのjs

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

MySQLでSQL文がどのように実行されるかの詳細な説明

概要最近MySQL関連の知識を勉強し始めました。学んだ知識ポイントと自分の理解を元に整理して共有しま...

ReactのEffectListの簡単な分析

目次EffectList コレクション最初のレンダリング時のEffectList EffectLis...

HTML ページをズームアウトした後にスクロール バーを表示するためのサンプル コード

ここでは、HTML ページのサイズを縮小した後に下部にスクロール バーを表示し、スクロール バーをス...

Docker 実行時にユーザーとグループを管理する方法

Docker はプロセスを中核としてシステムリソースを分離する管理ツールです。分離は、オペレーティン...

Vue-Routerのルート設定の詳しい説明

目次導入ルート内のオブジェクト属性パス: 文字列コンポーネント: コンポーネント | () =>...

Promiseの紹介と基本的な使い方の簡単な分析

Promise は、ES6 で導入された非同期プログラミングのための新しいソリューションです。 Pr...

JSONP クロスドメインシミュレーション Baidu 検索

目次1. JSONPとは何か2. JSONPクロスドメインリクエスト3. Baidu検索をシミュレー...

Vue は PDF.js を統合して PDF プレビューを実装し、透かしを追加する手順を実行します。

目次成果を達成する利用可能なプラグインの紹介ニーズに応じてプラグインを選択するプラグインのインストー...

Windows および Linux で tomcat9 を介して war パッケージを手動で展開する方法

Windows 環境と Linux 環境では結果が異なります。ウィンドウズステップ 1: Maven...

MySQLデータベースホスト127.0.0.1とlocalhostの違い

私の友人の多くは、127.0.0.1 と localhost の違いがわからず、問題に遭遇するかもし...

MySQL トリガーの追加、削除、変更、クエリ操作の例

この記事では、例を使用して、MySQL トリガーの追加、削除、変更、およびクエリ操作について説明しま...