アコーディオン、メニュー、ローディングアニメーションにjQueryは不要
先日、アニメーションライブラリ「TweenMax」について記事を書きましたが、それを利用して、Webサイトに用いられる基本的な動き（アコーディオン、ナビ、ローディングアニメーション）を実装してみました。
[link text=”TweenMaxでサイトのアニメーションを実装したデモ” url=”https://satohmsys.info/files/demo/tweenmax/site/”]
ブラウザはChromeでしか確認してないのでレイアウトの崩れや軽微なバグ等についてはご勘弁ください…。
それでは、各部位のアニメーションをTweenMaxで実装した一例を掲載していきます。
TweenMaxでナビゲーションメニューを実装する
トリガーとなるボタンにdata属性を付与し、ナビが開いている状態/閉じている状態で、クリック時のアクションを振り分けます。
TweenMaxでタブ切り替えコンテンツを実装する
タブと、タブに対応するコンテンツのdata属性を同じ値にします。
タブをクリックするたびに、コンテンツをすべて格納した配列をループさせ、クリックしたタブと同じdata属性以外のものを閉じた状態にする処理を行います。
TweenMaxでアコーディオンメニューを実装する
クリックしたボタンに対応するコンテンツが閉じているか開いているかを、data属性で判別します。
だいたい同じような理屈ですね。
以上、雑なデモですが。。jQueryを使わずともJavascriptの基礎的な知識とTweenMaxで、webサイトの基本的な効果は実装できます。
しかも、アニメーションのパターンも複数用意されているため、世界観にもフィットしやすくデザイナーの意図やアイデンティティ的なところも細かく調整できることでしょう。
よろしければご参考くださいー！
でわ！
[link text=”TweenMaxでサイトのアニメーションを実装したデモ” url=”https://satohmsys.info/files/demo/tweenmax/site/”]
