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

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

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

投稿:2018/06/06 更新:2018/08/06


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

概要

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

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

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

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

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

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

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

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

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

JQueryとCSS3でのスクロールエフェクト(PC+スマホ)

プラグインではなく、JQueryとCSS3を組み合わせて一から作成すれば、
JQueryでスクロールの位置によってclassを設定し、それに伴う動きなどをCSSで設定すればプラグインにはない細かな設定も可能ですが、
JQueryとCSS3のアニメーション関係の知識も必要になり、もちろんそれに伴い手間もかかるので費用もかかる形になります。
 

visual artができること

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

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

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

  • .

千葉、東京周辺を中心にホームページ制作を承っております。具体的に決まっていない場合は企画構成からのご提案も可能です。
ホームページ作成のご相談・お見積は無料です。まずは概算見積をしますのでお気軽にお問い合わせください。

お見積+ご相談(無料)

PAGE TOP