動きのあるホームページ

動きのあるホームページ

サイト制作での最近の流行りは、動きのあるサイトらしい、個人的には必要ないと思いますがキャンペーンサイトとか使い方によっては、なんだか目立って良いかも。

早速、当サイトにも試験的に入れてみました。

ページスクロールの量でJsが発火して設定した要素にCSSを加えるような使い方が一般的でスクロールに対応するJsは沢山あるんですが他のファイルとバッティングするのか、当サイトでは、これしか動かなかった。でも他のJsと比較して設定とかが一番使いやすかったので、まあいいかな。

https://t-scroll.com

美しく動かすにはタイミングを調整する必要があります。このサイトではあんまり美しくないけど、細かく調整すればもう少しマシな動きになりそうです。

ただ、問題もあってレスポンシブで、スマホやタブレッドでみると、右側から現れるパターンで不具合が発生!要素が右から現れる時にサイト自体の横幅が一瞬広くなるので、うまく動かないんですよね。

あと、拡大~縮小とかもスマホの横幅を拡大の時点で一瞬越えるので、やはりNGだと思う。

動きのデータをPCとスマホで分けるか、overflow-x: hiddenとかで、切り取るのが正解なんだろうけど、右から現れるパターン、拡大パターンは使わない方が良いかもね。

BLOG & INFORMATION
jin-office / jin kangsa
TOP