新年1発目のサンプルになります。

画面をスクロールするとヘッダーやナビゲーションが画面上部からニョキッと現れてそのままスクロールに追随する演出を最近よく見るのですが、簡単なサンプルを作ってみたいと思います。

と、言っても実際はほぼjavascriptのみで実装しますので、簡単なのですが、まずjqueryを使用しますので、サイトよりダウンロードを行い、外部ファイルとして読み込みます。

次にスクロールされた際にナビゲーションを追随させるためのjavascriptを書きます。

ヘッダーとナビゲーションの高さ分スクロールされるとナビゲーションにpositionのfixedを設定し、一度画面外に配置します。
次に画面上部からニョキッと現れるようにアニメーションさせています。

画面の上部にスクロールされ、元々のナビゲーションの位置にまで戻るとナビゲーションのpositionをstaticに戻し、完成です。

これを応用させれば、ヘッダー全体をスクロールに追随させたりすることができます。

サンプルはこちら

 

 

新年あけましておめでとうございます。

皆様はお正月いかが過ごされましたか？

私は、新年早々、風邪をひき、寝込んでしまいまして、ある意味寝正月となってしまいました（汗
ほぼ一年中休みなく昨年は働いていたので、年が明けて、気が緩んだのかなぁ～？

さて、今年のJoyArtの活動は、ちょっと本腰を入れて、下請け以外のお仕事もやっていきたい。早速企画を練っているんですが、今年の前半には、世の中に出せるかな？

 

クリスマスのこんな時期に普通にお仕事させていただいとるんですが、ちょっと時間が空いたので、メモとして投稿したいと思います。

先日、打ち合わせに行った際に聞かれたんですが、「スマホのデザインは横幅何ピクセルでやればいい？」

業務上、いろいろな制作会社様と絡みますもので、よくそんな相談をおうけするのですが、だいたい過去のケースを参考にすると640ピクセル程度あれば問題はないと思います。

たまに320ピクセルで作成したデザインのご入稿をいただくケースがあるのですが、やっぱり今の解像度のこととかを考慮するとキツイ。

あと、「じゃぁ320ピクセルを倍にしてるからフォントサイズも倍にした方がいい？」と、続けて聞かれるんですが、倍のフォントサイズでデザインを起こしている方が多い。特にこの方法で問題が起きたことは無かった。・・・・気がする（汗

今年は、スマホ関連のお仕事を月に数回お請けすることも珍しくなかったのですが、やはりまだまだ手探りのデザイナーさんも多いようで、他のデザイナーさんがどんなデザインの起こし方をしているのか気になっている方が多いようですね。