【jQuery】フルFlashのようなサイト制作は、8要点を押さえれば乗り切れる

001

エンタメ系サイトのコーディングなどでは、CSS3とjQueryを駆使したフルFlashっぽい仕上がりを要求されることがあります。面倒な作業ですが、8要点を押さえて応用きれば大抵の案件は乗り切れます。

目次

  1. 1枚背景ブロックでコーディング
  2. アイキャッチアニメーション
  3. アンカーリンクで各ブロックtopへ
  4. スクロールバーはいじらない
  5. メニューボタンのマウスオーバー
  6. 座標取得によるクラス付与
  7. 背景パララックス
  8. 無限ループアニメーション

 

1枚背景ブロックでコーディング

背景をフルブラウザにすることが多いので、ブロックの高さを100%にしておく。
min-height: 100%; / height: 100%; どちらにするかは場合によりけり。

 

アイキャッチアニメーション

実務案件では時間差アニメーションが採用されやすく、Animate.css で大体はカバーできる。
jQueryで Animate.css のクラス付与と animation-delay を組み合わせて、要望に応じてCSSを修正すれば何とかなる。

 

アンカーリンクで各ブロックtopへ

Velocity.js を利用すると、タッチデバイスでも滑らかにスクロール。

 

スクロールバーはいじらない

絶対的な理由がない限り、スクローバーのJavaScript制御は原則なしで。余計なことはしなくて良いと肝に命じるべし。

 

メニューボタンのマウスオーバー

シンプルなフェードにするだけでも、それなりの見映えを確保できる。
デモは transition: 0.3s; と書いているだけ。

その他にも、有名ブロガーさんがホバーエフェクトを多数紹介してくださっているので、参考にしたい。

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

 

座標取得によるクラス付与

各要素のトップ座標を取得して、スクロールが達したら Animate.css のクラスを付与してアニメーションさせる。

 

背景パララックス

背景画像をページ全体に fixed で設置、もしくは各ブロック要素に配置して、jQueryでパララックス効果を付与。
position と z-index の使い分けがコツ。

また、複数背景にしてそれぞれ数値を変更すれば、背景同士の視差効果も得られる。

タッチデバイスでは有効性がないので、UA切り替えでPCのみにする。

 

無限ループアニメーション

バナーなどで使うGIFアニメーションを、CSSのみで対応するイメージ。デモのハートアイコンは、Animate.css「flip」を改良した。

 

参考サイト

    • このエントリーをはてなブックマークに追加