Blog

要素を小刻みに動かしたり、浮かしているようにするjQuery

今回、3つのjQueryを紹介します。

 

ひとつは、要素を小刻みに動かすプラグイン。

iphoneのアイコンを長押しした時のような動きになります。

jQuery Wiggle plugin

 

もうひとつは、要素をぷかぷか浮かせたりすることができるプラグインです。

jqFloat.js – A Floating Effect with jQuery!

 

最後は、弊社代表が作成したスクロールの位置に応じて、

アニメーションさせることができるプラグインです。

sf_scroll_trick.js

 

一先ず、デモをご覧ください。

 

chromeとfirefoxのアイコンが動いています。

 

その下へスクロールすると、位置に応じて各ブラウザのアイコンが 小刻みに動きます。

クリックすることでもON/OFFにすることができます。

 

DEMO

 

使い方は、まず、

 

を読み込みます。 あとは、それぞれ

 

 

と指定するだけです。 オプションで設定もできます。 例としてDEMOのソースをご覧ください。

 

jquery

 

css

jquery.wiggle.jsについては、cssは特に設定していないので割愛します。

 

 

html

HTMLについて特に特別なことはしていません。

 

 

こんな感じで簡単に設置可能です。

ランディングページなんかで目を引くために使用してみるとおもしろいかもしれません。

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ