タグ

ブックマーク / on-ze.com (2)

  • 【jQuery】斬新な動きのスライドショーが魅力の[Fullscreen Slit Slider]の使い方

    今日は大胆な動きのスライドショーが魅力のjQueryプラグイン[Fullscreen Slit Slider]を紹介します。 まずは実際に[Fullscreen Slit Slider]を使ったサンプルをご覧ください。 実装サンプル:ONZE Fullscreen Slit Slider こちらのサンプルではカスタム仕様で「フルスクリーン対応、」「2.5秒ごとに自動再生」「キーボードの左右でスライダーを制御可能」にしています。 スライダーが切り替わるタイミングで上下左右に大胆なスリットが入り、ダイナミックな動きで次のコンテンツが表示されていきます。 見ていても気持ちイイ滑らかさですよね。 基的にはコピペで実装できますが、細かな設定にはjQueryもしくはJavaScriptのプログラミングの知識が必要なので、難易度は中級〜上級者仕様になります。 初心者にはちょっと難しいかもしれません。

    【jQuery】斬新な動きのスライドショーが魅力の[Fullscreen Slit Slider]の使い方
  • 【jQuery】超万能スライダー FlexSlider の使い方をマスターする。 - ONZE

    今日紹介するのは jQuery プラグインの[FlexSlider]です。 これ、かなり便利です。 レスポンシヴ対応、タッチコントロールのフリックスライドにも反応、カルーセルもOK、画像にリンクを貼ることはもちろん、キャプションも表示可能、動画もスライドできる、コントロールボタンやナヴィゲーションも細かく設定できる…。まさに“超万能”のスライダー。 とにかく「なんでもできる」印象で、スマートフォン対応サイトなどでは特に真価を発揮するのではないでしょうか。 まずはサンプルをご覧ください。 【FlexSlider】→サンプルデモ 高機能ですが、その導入方法は比較的簡単です。 [FlexSlider]の導入方法 まずは以下のサイトから[FlexSlider]のプラグイン体をダウンロードします。 http://flexslider.woothemes.com 続いて <head>〜</head>

    【jQuery】超万能スライダー FlexSlider の使い方をマスターする。 - ONZE
  • 1