JavaScript

スマホでタッチしながら下に引くと背景画像がズームしていくjQueryプラグイン「Pull and Zoom」

Pull and ZoomというjQueryプラグインがおもしろかったのでご紹介します。スマホでタッチしながら指で下に引くとヘッダーの背景画像がズームしていきます。実際のデモをiPhoneで触ってみましたが、とてもスムーズに動作していました。サイトにちょっとした遊び心を取り入れたい時なんかによさそうです。

[ads_center]

Pull and Zoom

以下から実際のデモを確認することができます。

デモ

タッチしながら上から下へスクロールするようにします。

Pull and Zoom

そうすると、以下のようにヘッダー部分に設定した背景画像がズームしていきます。

ズームする

下へ引けば引くほど拡大していくので、触っていておもしろいですね。ちょっとしたアクセントを追加したい時に役立ちそうです。

Pull and Zoom

Box ShadowCSSでボックスシャドウを作成してくれるジェネレーター「Box Shadow」前のページ

ページ全体をスライドさせるようなアニメーションを実装できるjQueryプラグイン「Multi-Screen.js」次のページMulti-Screen.js

関連記事

  1. js-offcanvas

    JavaScript

    上下左右にオフキャンバスのナビゲーションを実装できる「js-offcanvas」

    js-offcanvasは、上下左右にオフキャンバスのナビゲーションを…

  2. Houdini

    JavaScript

    シンプルな折りたたみ・展開やアコーディオンを実装できる「Houdini」

    Houdiniはシンプルな折りたたみ・展開ができる機能やアコーディオン…

  3. qpScroll
  4. animateClick

    JavaScript

    ボタンクリック時にアニメーションをつけれる「animateClick」

    animateClickはボタンをクリックしたときにアニメーションをつ…

  5. no-image
  6. Intense Images

最近の記事

  1. ナイトロコーヒー
  2. チーズベーコンエッグバーガー
  3. ランチセットA
PAGE TOP