jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

斜めのシャッターが左右に降りてくるjQueryアニメーション

2015年7月10日
この記事は掲載から564日経過しています。
情報が古い可能性が有りますのでご了承下さい

案件ネタです。

依頼されたのは、とある旅行代理店のランディングページで、左右二択のツアーをクリックして移動するページなのですが、これを画面いっぱいに画像を表示し、左右それぞれにマウスオーバーすると、逆側にシャッターを下ろす、というもの。

これだけ聞けば割と簡単なのですが、厄介なのは画像が斜めであるという点でした。先ずはサンプルを見て貰った方が早いと思います。

http://studio-key.com/Sample2/jquery/Slanting/sample1.html

中央の斜めのラインで分けられたそれぞれの側を覆うようにシャッターさせています。元々このようなアニメーションはFlashで他社に依頼していたようですが、現在のWEBはよほど必要性が無い限り、Flashは使わない方向にシフトしています。今回の案件はPC専用なのでiPhoneやAndroid端末などは考慮しなくて良かったのですが、これらの端末は基本的にFlash非対応です。

どう動かそうか色々と考えました。例えばボックスをcss3で斜めにして移動させるとか、html5でどうにか出来る方法は無いか?とか。

でも、そういうブラウザやバージョン依存なものをランディングページに使うのは宜しく有りません。

色々考えた結果、以下のような構成にしました。

left

中央のライン、左写真、右写真の順にpositionを絶対で配置し、間にシャッター色(ここでは解りやすく赤)を背景色にしたボックスを挟む感じです。緑色の部分は全体の背景だと思って下さい。

こうすることで、赤い背景をスライドさせると、斜めの裏側になるので綺麗にシャッターするはず。

CSS

CSSは割と単純で、それぞれ絶対値で配置し、枠内の画像は縦を100%とし、横はオートで可変させます。

Javascript

これも割と単純で、マウスオーバーした時の挙動を書くだけです。

ウインドサイズが変わる度に画像サイズが変わるので、ウインドサイズから画像を中央に寄るように調整します。厳密には左右二枚の画像は中央で重なる事でぴったりくっつける事になるので、その分のマージンを左右に取る計算をしています。

気をつけたい点として、全画面の左右にマウスオーバーする事でアニメーションが始まるので、ページをロードした時にマウスがブラウザ内に有るケースが多いため、ディレイを入れています。

FreezePaneOnは全てのボックスの最前面に全画面で表示されるボックスで、これを表示・非表示する事でマウスオーバー時のアニメーションを制御しています。ページ読み込み後はこれを全面に表示し(実際は透明)、3秒後までマウスオーバー効果が機能しないようにしています。

ちなみに、このFreezePaneOnは左右スライド時にも展開され、スライドが終わるまで、次のアニメーションが走らないようにします。

実際の案件はもっとアイテムも多く複雑ですが、ここまで出来れば、後はスライドした上に文字や画像をアニメーションで移動させてくるなど装飾を加えるのは簡単です。

画像(ページ)が読み終わるまでローディング画像を表示する

今回のアニメーションとは直接の関係は有りませんが、全画面+透明PNGなので、画像は酷く重たいです。また、ブラウザを左右にある程度伸ばしても画像が画面いっぱいに出るように、横幅をかなり長くしています。これを表示するまで、回線が遅いと結構時間が掛かってしまうので、ローディングを入れます。

それがこれ

 full_coverは背景色と同じ色の全画面ボックスで、その上にローディング画像を乗せます。

$(function(){ ~
ページを表示した際に実行します。なので、最初はローディングが表示されます。

次に、画像なんかの処理は以下を使います。
$(window).load(function () { ~

これはページ内のアイテムを全て読み込んだ後に実行されます。

つまり、最初はローディングをすぐ表示しますが、メインの処理は画像を読み込み終わった際に実行されるように書いていますので、その先頭に full_coverとローディング画像を非表示にする処理を書く事で、ローディングアニメーションのように見せています。

これ、色んな方法が有りますし、プラグインも有ります。待機時間が長いと離脱率が上がるので、テキストなんかはすぐ見せて、画像のみをローディングさせるって手も有ります。ローディングは割と手間が掛かるものが多いですが、今回のような単純な方法でも実現出来ますので、用途に合わせて何を利用するか考えると良いと思います。

 

 

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

このカテゴリーのその他の記事

PAGE TOP