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. クリスマスブロンドロースト
  2. トマトとニンニク
  3. ウィンターホワイトマグツリー
  4. 読書の進捗状況を非表示にする
  5. 牛すじ煮込みカレーと温野菜
PAGE TOP