Rotate Animation & Agile Template Image Gallery

すばやくロードし反応が速いCSSのみのスライダー。これを使うことで、ユーザーはタッチとスワイプのジェスチャーでスライドをナビゲートできるので、モバイル優先のデザイナーに最適。全体的な外観は清潔で新鮮ですが、いくつかの興味深い癖を持ちます。スライダーは、白とオレンジの配色を使用しています。

デモンストレーションは境界線を持たず、形状は正方形。正方形であることは、スライドショーが非常に柔軟で、広い範囲の写真を使用することができることを意味します。

スライド画像の上にマウスを置くと、両側に2つのナビゲーションの矢印、そして中央に一時停止/再生アイコンが表示されます。ナビゲーションの矢印は、オレンジ色の円の上に白い矢印の頭として表示され、再生/一時停止アイコンもオレンジ色の円の上に白で表示されます。これらのアイコンは「スピン」して位置につき、スライダーの上からマウスを移動すると、スピンして消えます。

ユーザーがアイコンの上に移動した場合、オレンジ色の円の周りに第二のオレンジ色の境界線が現れて、「二重丸」効果が生まれます。ナビゲーションの矢印は、前後にシフトすることで、それらをクリックするようユーザーに促します。どちらかの矢印をクリックすると、画像間を前後に移動することができます。

「一時停止」ボタンをクリックするとスライダは次の画像を表示するのを中止し「プレイ」のシンボルにアイコンが変更されます。プレイシンボルをクリックすると、ショーを再開します。

キャプションは左下隅にありと「ラト」と呼ばれるサンセリフ体を使用。テキストは白であり、それはオレンジ色の背景上にあります。タイトルとサブタイトルの両方があり、どちらも角の丸い独立した、長方形の背景を持っていて、これら長方形は組み合わさり新しい形状を作成。これらのキャプションは次々に、徐々にズームしながら表示されることで、オーガニックな感じを与えます。

スライドの下部には、スライドショーの画像を表すオレンジの円のセットがあります。現在のイメージを表す円は、「二重丸」効果を生むオレンジ色の境界線を得ます。第二の円はやや斜めにあり、すてきなタッチに仕上がります。それは設計上の微妙な特徴ですが、デザインにオーガニックな感じを与えることができます。

ユーザーが円の上に移動すると、オレンジ色の枠内のプレビュー画像は、徐々にズームして表示されます。これらのプレビュー画像をもとに、ユーザーは、次に表示されることが予定されている他のスライドを見たり、ロードする1枚を選択したりすることができます。

デフォルトのトランジション効果は「回転」で、新しいイメージがスピンして表示され古い画像がスピンして消えます。清潔でモダンな感じを生み出しますが、動作が多いです。

デザインは近代的で楽しく、幅広いウェブサイトでうまく動作するでしょう。公共交通機関のウェブサイト、「直前」のショッピングサイトや観光サイトなどのような携帯電話向けに最適化されたサイトに最適な、反応が速い、CSSのみのデザインなので、外出先で人々に自社のサービスを販売したり、情報を提供したりする必要がある企業にとって素晴らしいです。