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. no-image

    JavaScript

    カードを入れ替えるような3Dアニメーションによるスライダー「stack-slider」

    stack-sliderはカードを入れ替えるような3Dアニメーションに…

  2. kissui.scrollanim

    JavaScript

    スクロールによる多彩なアニメーションを実装できる「kissui.scrollanim」

    kissui.scrollanimは、CSS3を活用したスクロールによ…

  3. FancySelect

    JavaScript

    セレクトメニューをスタイリッシュに実装できるjQueryプラグイン「FancySelect」

    セレクトメニューをシンプルでスタイリッシュに実装することができるjQu…

  4. flexImages

    JavaScript

    軽量でFlickrやGoogle画像検索のようなギャラリーのjQueryプラグイン「flexImag…

    flexImagesというjQueryプラグインを使えば、軽量でレスポ…

  5. no-image

    JavaScript

    シンプルなイメージカルーセルを実装できる「Boishakh carousel」

    Boishakh carouselはシンプルなイメージカルーセルを実装…

  6. JavaScript

    要素の位置までスクロールしてスピード設定もできるjQueryプラグイン「scrollToBySpee…

    scrollToBySpeedは指定した要素の位置までスクロールしてく…

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP