[JS]バウンスのモーションが楽しい垂直型のアコーディオンを実装するチュートリアル

開閉時に弾むようなバウンスのモーションをつけたアコーディオンをjQueryで実装するチュートリアルをWeb Designers Deskから紹介します。

デモのキャプチャ

Create Bounce out Vertical menu with jQuery
デモページ

画像は一切使用していないので、カスタマイズも簡単にできると思います。

実装にはjquery.jsとアニメーションで使用しているプラグイン「jQuery Easing Plugin」が必要です。

HTMLはシンプルで、リスト要素を使用しています。

HTML

CSSは角丸とボックスシャドウでCSS3を使用しており、CSS3非対応ブラウザでは矩形影無しで表示されます。

JavaScriptは前述の2ファイルに、下記のスクリプトを追加するのみです。

sponsors

top of page

©2018 coliss