no-image

JavaScript

画面が半分に割れながら切り替わる縦型スライドショー「Split Slick Slideshow」

Split Slick Slideshowは、画面が真ん中から半分に割れながら切り替わる縦型のスライドショーを実装できます。ダイナミックなアニメーションで切り替わるスライドショーを求めている人にはピッタリですね。CSSとJSで構築されています。

ナビゲーションからも操作可能

デモ

デモでは画面いっぱいに広がった風景画像が表示されていて、上下にスクロールすることで次の画像に切り替えることができます。画像が半分に割れながら切り替わっていくアニメーションはとても迫力がありますね。

また、右側にはナビゲーションも設置されています。横になった線がコンテンツの数だけあり、現在開かれているコンテンツの横線が他のものより長く伸びるようになっています。

ちなみにこのナビゲーションからでも画像の切り替えが可能です。

JSのコード内を見るとわかりますが、swipe、vertical、arrows、infinite、speed、cssEaseといったオプションによるセッティングもできるみたいですね。

Split Slick Slideshow

countdownCube3Dキューブのように回転するカウントダウンタイマーを実装できる「countdownCube」前のページ

WAI ARIAを活用したユーザーフレンドリーなツールチップ実装「ARIA TOOLTIP」次のページARIA TOOLTIP

関連記事

  1. progresspieSVG

    JavaScript

    円形のプログレスバーを実装できる「progresspieSVG」

    progresspieSVGは円形のプログレスバーを実装できるjQue…

  2. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2013年上半期に紹介したjQueryプラグイン50選まとめ

    気づいたらあっという間に2013年上半期が終わってしまいましたね。とい…

  3. footerMenu

    JavaScript

    スクロールでフッターメニューを表示させる「footerMenu」

    footerMenuはスクロールするとフッターメニューを表示させること…

  4. zelect

    JavaScript

    セレクトボックスをカスタマイズして使いやすくしてくれる「zelect」

    zelectはセレクトボックスをユーザーが使いやすくなるようにカスタマ…

  5. jquery.xtr

    JavaScript

    クライアントサイドで変換してくれる「jquery.xtr」

    jquery.xtrはページのリフレッシュなしにクライアントアイドでテ…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP