Carousel はインターネット上で非常に有名です。 Web カルーセル は、貴重な Web サイトのスペースを確保しながら、同様のコンテンツを触覚的な場所に整理するエレガントな方法です。写真の表示、商品の提供、新規訪問者の興味を引くために使用されます。しかし、それらはどれほど効果があるのでしょうか?カルーセルに対しては多くの議論があり、パフォーマンスを向上させるためにカルーセルを使用することについての研究も行われています。しかし、カルーセルはウェブサイトのユーザビリティにどのような影響を与えるのでしょうか?
この記事では、カルーセルの基本と、HTML と CSS を使用してカルーセルを作成する方法について説明します。
カルーセルは、一連の回転するバナー/画像を表示するスライド ショーです。カルーセルは通常、Web サイトのホームページに表示されます。ウェブサイトの見栄えが向上します。スライダー、ギャラリー、スライドショーとも呼ばれる Web カルーセルを使用すると、テキスト、グラフィック、画像、さらにはビデオを動的な「スライディング」ブロックで表示できます。これらは、コンテンツとコンセプトをグループ化し、特定のコンテンツ間に視覚的なリンクを作成するための優れたデザインの選択肢です。 Web カルーセルは、電子商取引サイトで関連製品を宣伝したり、デザイン ポートフォリオで注目のプロジェクトを紹介したり、不動産 Web サイトで家の内部と外部の写真をループしたりする場合にも最適です。ただし、それらが常に最良の選択であるとは限りません。 多くのデザイナーは、読み込み時間が遅くなり、デザインの流れが台無しになるとして批判しています。ただし、デザイン関連のものと同様に、Web カルーセルを正しく実行すると、コンテンツを簡単に移動できるように分割できます。
Web ページのカルーセルを作成するにはどうすればよいですか?
ここでは、Bootstrap のようなフレームワークを使用せずに単純な Web カルーセルを作成する方法を見ていきます。
まず、
titleを含む div 要素をコンテナとして作成します。 これで、
content(トランジション全体を通じて固定されたままになるテキスト部分が含まれます) と slideshow (可動部分、つまり 4 つの画像とボタンが含まれます)。 CSS を使用してカルーセル画像とボタンのスタイルを設定します。スライドの位置を相対的な位置として保持します。
CSS アニメーションを使用して、カルーセル内の画像をスムーズに切り替えます。
Example
の中国語訳は次のとおりです:ビジュアル フォーマット モデルで使用される座標空間を変更するには、CSS のtransform プロパティを使用します。これにより、要素に傾き、回転、移動などの効果を適用できます。
＃＃＃文法＃＃＃ リーリー
translate3d(x, y, z)
initial
inherit
CSSアニメーション CSS のアニメーション プロパティを使用すると、要素のさまざまなスタイル属性を一定の時間内に変更して、要素にアニメーション効果を追加できます。
Animation-name
アニメーション期間
アニメーション時間関数
アニメーション遅延
@keyframes は、指定された期間内にアニメーションで実行する必要があるコードを指定するために使用されます。これは、アニメーション中に特定の「フレーム」の CSS プロパティを 0% (アニメーションの開始) から 100% (アニメーションの終了) までの範囲のパーセンテージで宣言することによって実現されます。
以上がCSS を使用してカルーセルを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
