ホームページ制作 千葉 visual art

HTML・CSS, ホームページ作成時, ホームページ制作関連コラム, レスポンシブデザイン・スマホ対応

スクロールでふわっと表示する動きでインパクトのあるサイトに

投稿:2018/06/06


さて、最近スクロールすると文字や写真がふわっと表示されるようなPCサイトをよく見ますよね。
当サイトのトップページ「ホームページ制作 千葉 visual art」もモニター幅が広いバージョンではスクール時にふわっと文字や画像が表示されるようになっています。
 

概要

いったいどのようにしているのかというと、ざっくりいうと、JQueryのプラグインなどを利用してスクロールがある程度いくと画面や文字を表示するようにしているのです。

また、スクロール前の最初の画面表示の部分であればHTML5 Canvasでただ単にアニメーションさせる方法もあります。

その他、CSS3であれば簡易なアニメーション、例えばフェードインやフェードアウト、左から右に移動程度であれば対応可能なので、CSSで行っていることも多いでしょう。
 

スクロール前の最初の画面でインパクトを求めるなら(PC+スマホ)

HTML Canvas アニメをお勧めします。昔流行ったFlashほどの凝ったものは厳しいかもしれませんが、それなりに面白いアニメーションでインパクトのあるものがPC用にもスマホ用にもできるでしょう。
しかし、それなりに費用がかかるので、トップページだけなどインパクトを出したいページだけに使うのが良いでしょう。
 

スクロール前の最初の画面で費用を抑えて控えめな動きでいいなら(PC+スマホ)

CSS3でのアニメーションが良いでしょう。
一部の文字や画像を左から右に少し移動しつつ、フェードインで表示させたりする程度になりますが、動きによって多少目を引くページになります。一定のパターンで作成して、同じ構造のページに当てはめたりすることもPC用、スマホ用共に可能なので、費用を抑えつつ共通化した下層ページの見出し部分などで使用することが可能です。
 

スクロール時にふわっとする動きを求めるなら(PCのみ)

FadethisなどのJQueryプラグインを利用して対応するのが費用の面を考慮するとお勧めです。
デフォルトの設定だと単調な面白みの欠けるものになるかもしれません。
しかし、少し手間はかかりますが、オプションで各パーツの表示されるスピードやタイミングを各自設定することによってリズムのついた面白いサイトを表現することが可能です。
 

visual artができること

visual artではHTML Canvas アニメをはじめ、CSS3での簡易なアニメーション、FadethisなどのJQueryプラグインを使用しての動きを加えたホームページ作成を承っております。
デザインやアニメーションの凝り具合によって費用は変わってきますので、「お見積+ご相談」ページからまずはお気軽にお問い合わせください。

ホームページ制作料金プラン

このエントリーが役に立ったらシェアしてください

  • .

ホームページ作成のご相談・お見積は無料です。まずは概算見積をしますのでお気軽にお問い合わせください。
千葉、東京を中心にお伺いしてのお打ち合わせも、必要に応じてさせて頂きますのでご相談ください。

お見積+ご相談(無料)

PAGE TOP