Slide Animation & Blast Design Image Slider

劇的で美しい、全幅・CSSのみのスライダー。タブレットとスマートフォンに最適、タッチ・スワイプが有効、また、非常に高速でロード。

スライダーは全幅であるため、画像は最大の影響力を持ち、ゆえにこのスライダーは、自分のサイトの焦点が画像にあることを望む写真家やその他の人間に最適。

ユーザーがスライドと対話したりスライドの上に移動したときに表示される2つのナビゲーションの矢印と一時停止/再生ボタン。これらは、深い青色の円形の背景に対して大胆な白いアイコンを使用。これらは所定の位置に「ドロップ」、フェードイン、そして縮小するように見えます。これは劇的・魅力的な効果で、逆方向にも全く同様に動作して、アイコンがスライダーから上昇するように見えます。これら全てはデザインに三次元な感じを与えます。

アイコンの上にマウスを置くと、中央の円から放射状に立上ってから消えていくように見える青い枠が生まれます。ここでも、スタイリッシュで劇的な効果がこのスライダーのデザインを本当に目立たせます。

アイコンは、あなたが期待することを正確に実行：次/前の矢印をクリックすると、該当するスライドに移動し、再生/一時停止ボタンをクリックするとスライドショーを停止または再生。

また、ユーザーは、画面の下部中央にある円を使用して、スライド間を移動可能。これらの円は、深い青で、それぞれがスライドショー内の画像を表します。新しいイメージがビューポートに現れると、関連する円に、目を引く半透明の太い白のボーダーが現れて、ユーザーが円がどのように機能するかを理解するのに役立ちます。

円と対話すると青枠内にプレビュー画像が表示されます。このプレビュー画像は、他のアイコンと同じ方法でドロップし飛び出します。円をクリックすると、スライドショーにその画像がロードされます。

スライドショー内の各画像は、続いて表示されるスライドが次のスライドまたは前のスライドであるかに応じて、左または右のいずれかに「スライド」。2つまたは3つ離れたスライド(画像)に移動するのに円を使用する場合は、またはスライドショー(画像)が「終わり」に達し、先頭に戻った時は、すべてが素早く実行されます。これは、非常に微妙である、自然な、「現実的な」感じを与えますが、スライダーはフレンドリーでオーガニックな印象を与えます。

キャプションは左下隅にあります。タイトルとサブタイトルの両方があり、半透明の青い四角形を背景に白いテキストとして表示されます。キャプションは、他のアイコンとプレビュー画像と同じように、所定の位置へ「ドロップ」、或いは所定の位置から「上昇」。半透明の青色の背景を使用することで、その下にある写真の色が表示され、キャプションに少し柔らかい感触を与えます。

キャプションはDuru Sans―ヒューマニストとモダニズム･デザインをミックスしたサンセリフ体―を使用。結果は非常にエレガントで、デザインに洗練された感じを与えます。

JQuery、ジャバスクリプト、及び画像がありませんので、このスライダーは高速であり、どのプラットフォームでも動作します。モバイル優先のデザイナーに最適です。