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. Random Text Shuffle

    JavaScript

    シャッフルしながらテキストが表示される「Random Text Shuffle」

    Random Text Shuffleは文字をシャッフルしながらテキス…

  2. imagelightbox

    JavaScript

    レスポンシブ対応でタッチフレンドリーな画像ギャラリー「imagelightbox」

    imagelightboxは、レスポンシブに対応したタッチフレンドリー…

  3. Hover Carousel

    JavaScript

    超軽量なホバーカルーセルを実装できる「Hover Carousel」

    Hover Carouselは超軽量なホバーで動作するカルーセルを実装…

  4. no-image

    JavaScript

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

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

  5. JK Responsive Youtube Video and Image Gallery
  6. SmartPhoto.js

    JavaScript

    レスポンシブなイメージビューアを実装できる「SmartPhoto.js」

    SmartPhoto.jsは、レスポンシブに対応したかっこいいイメージ…

最近の記事

  1. EOS RP
  2. COMOLI シルクネルジャケット シルクネルドローストリングパンツ
  3. スターバックス ハシエンダ アルサシア
  4. イングリッシュマフィン

アーカイブ

PAGE TOP