TweenMaxでWebサイトによく使われるアニメーションを実装してみた

2016.9.21 jQuery

アコーディオン、メニュー、ローディングアニメーションにjQueryは不要

先日、アニメーションライブラリ「TweenMax」について記事を書きましたが、それを利用して、Webサイトに用いられる基本的な動き(アコーディオン、ナビ、ローディングアニメーション)を実装してみました。

[link text=”TweenMaxでサイトのアニメーションを実装したデモ” url=”http://satohmsys.info/files/demo/tweenmax/site/”]

ブラウザはChromeでしか確認してないのでレイアウトの崩れや軽微なバグ等についてはご勘弁ください…。

それでは、各部位のアニメーションをTweenMaxで実装した一例を掲載していきます。

TweenMaxでナビゲーションメニューを実装する

トリガーとなるボタンにdata属性を付与し、ナビが開いている状態/閉じている状態で、クリック時のアクションを振り分けます。

TweenMaxでタブ切り替えコンテンツを実装する

タブと、タブに対応するコンテンツのdata属性を同じ値にします。

タブをクリックするたびに、コンテンツをすべて格納した配列をループさせ、クリックしたタブと同じdata属性以外のものを閉じた状態にする処理を行います。

TweenMaxでアコーディオンメニューを実装する

クリックしたボタンに対応するコンテンツが閉じているか開いているかを、data属性で判別します。

だいたい同じような理屈ですね。

 

以上、雑なデモですが。。jQueryを使わずともJavascriptの基礎的な知識とTweenMaxで、webサイトの基本的な効果は実装できます。
しかも、アニメーションのパターンも複数用意されているため、世界観にもフィットしやすくデザイナーの意図やアイデンティティ的なところも細かく調整できることでしょう。

よろしければご参考くださいー!

でわ!

[link text=”TweenMaxでサイトのアニメーションを実装したデモ” url=”http://satohmsys.info/files/demo/tweenmax/site/”]

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからグラフィックデザイン的なことをして、ごにょごにょと小さく活動中。Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったり、主に散歩しています。だいたいラーメンを食べて帰ってくる、そんな過ごし方です(都内のオススメ散歩コース募集中!)。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。