jQuery・Animate.css の合わせ技でフルFlashサイトライクな動きを実現

kaboompics.com_White-dog-with-stick

Sublime Text専用・Animate.cssパッケージを利用します。

アニメや映画などを紹介するエンタメ系サイト、1枚画像をフルで見せるブランディングサイトなどでは、かつて流行したフルFlashサイトのような動きを要求されることがあります。

そんな時は、Animate.css を利用すると便利です。それっぽいものを作ってみました。

IE9で使えないのでは? 国内シェアが 3.42% なのでもういいでしょう。

目次

検証済みブラウザとOS

  • IE 10~
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X Yosemite
  • iOS 8
  • Android 4.1 / 5

 

主な作成手順

description

1. Sublime Text プラグイン「Animate.css Snippets」をインストール

インストールと使い方はこちら。

2. Animate.css 本サイト からCSSファイルをダウンロード

3. ライセンス情報と基本クラスをコピペ

 

4. コーディング

ベンダープレフィックスは? gulp で自動化しましょう。

Sass用のメディアクエリはこちらを参考。

5. Animate.css 本サイトで動きを確認しながらコードを追加

animate と入力するとコードが表示されるので、任意のネームを選択。 先方の要望に合わせて、必要な動きを選んでいく。

 

6. jQueryでクラス追加やスクロール処理を設定

 

注意点

bug

以下の点から、作り込みすぎないように注意を。

  • 凝ったアニメーションは訪問者の反感を買う可能性が高い
  • 修正依頼の対応が面倒
  • 手間ばかりかかって予算オーバー

 

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは、一度だけクリックしてお待ちください。