ホームページの細部に無駄なこだわり

仙台のホームページ制作会社ピクセルです。

今回は技術面のお話です。

6/19のエントリー、HTML5canvasによる小細工で、html5canvasによるアニメーションを入れた、と書きましたが、その後の変化に気づいていただけましたでしょうか？

歌と森の妖怪屋敷、主人公歌の他に、数種類の妖怪が駆けて行きます。
スマートフォンで見ると、空から飛んで来るアメフラシにちらつきが生じてしまうのですが、PCではスムーズに再生します。

だから何？と言われればそれまでですが・・・（^ ^;

canvas表示部分（アニメーション展開部分）のボタンが押せない、というトラブルがあったので、以下のように、「最上部から700pxスクロールしたらcanvas要素を消す」という指示をjavascriptファイルに以下を追加して、無事解決。

$(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 700) {
$("#canvas").fadeOut('fast');
}
});
});

また、メイン画像部分のテキスト（h2）の下のコピーに対し、スクロール位置によってフェードイン、フェードアウトする処理を入れました。

$(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$(".catch").fadeOut('slow');
} else {
$(".catch").fadeIn('slow');
}
});
});

スマホでは高さ次第でアニメーションがヘッダー部分の下になってしまうバグを発見したので、z-indexを調整してcanvasを最前面へ表示しました。

誰も気づかないような細部の修正でした。
使えそうなソースあれば、ご自由にお使いください！

株式会社PIXEL
http://pixel-co.com/