Gimmick logはWebサイト制作で役立つjQueryやCSS、WordPressの小技、実装方法をご紹介しています。

カルーセルスライダー

レスポンシブに強いカルーセルスライダーslickの使い方

slick
  • レスポンシブ
  • スマホ対応
  • 画像遅延

サムネイル付き、レスポンシブ、画像遅延読み込みなど、様々なスライダーの実装に対応したjQueryプラグインです。

万能スライダー Slider Pro の使い方

sliderPro
  • レスポンシブ
  • スマホ対応
  • 全画面表示
  • Retina対応

サムネイルやキャプションの表示位置を指定することが出来る、自由度の高いjQueryプラグインのスライダーです。

モーダルウィンドウ

iziModalで手軽にリッチなモーダルウィンドウを実装する

iziModal
  • レスポンシブ
  • iframe
  • アラート

豊富なオプションと、アニメーション表示がモダンなモーダルウィンドウが実装できるjQueryプラグインです。

Colorboxで色んなモーダルウィンドウを作ってみる

Colorbox
  • レスポンシブ
  • iframe
  • ajax
  • IE対応

シンプルなデザインのモーダルウィンドウが実装できるjQueryプラグインです。下位のIEにも対応しているのがありがたいです。

ユニークなアニメーション付きで全画面モーダルウィンドウを表示する animatedModal.js の使い方

animatedModal
  • 全画面表示
  • ナビゲーション

画像表示だけでなく、ナビゲーションの表示にも使える全画面表示のモーダルウィンドウのjQueryプラグインです。

jQueryやCSSを使ったアニメーション

ループするアニメーションで要素を動かす

  • 繰り返し
  • IE対応

jQueryのanimate()関数を使って出来るアニメーションの方法をまとめました。

スクロールしたタイミングでフェードイン・アウトを繰り返すFadeThis

FadeThis
  • スクロール
  • IE対応

要素が表示領域に入った時に上下左右から表示させることが出来るjQueryプラグインです。IE6から対応しています。

inview.js で画面に表示されたタイミングでアニメーションを開始する

inview.js
  • スクロール
  • CSS3

上記FadeThisと同じく、要素が表示領域に入った時に表示させるjQueryプラグインですが、CSSアニメーションのライブラリを読み込むので、動きのバリエーションが豊富です。

スライドメニュー・ナビゲーション

スマホアプリみたいなスライドメニューを実装できるmmenuを使ってみた

mmenu
  • スマホ対応
  • 横スライド
  • ツールチップ

メニュー表示も、任意のコンテンツを横からスライドさせることも出来る、カスタマイズ性の高いjQueryプラグインです。

メニューやコンテンツをスライドさせて表示する

  • スマホ対応
  • 横スライド
  • プラグイン不使用
  • IE対応

プラグインを使わずに、jQueryでメニューやコンテンツをスライドさせる方法です。

レスポンシブなスライドメニュー Responsive Nav の使い方

  • スマホ対応
  • レスポンシブ
  • 縦スライド
  • IE対応

画面幅によってメニューを横並び or ハンバーガーメニューに切り替えられるjQueryプラグインです。

RECENT POSTS