スクロールでふわっと表示する動きでインパクトのあるサイトに | ホームページ制作関連コラム | 千葉 visual art

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

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

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

投稿:2018/06/06 更新:2018/12/09


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

概要

いったいどのようにしているのかというと、ざっくりいうと、JQueryなどを利用してスクロールがある程度いくと画面や文字を表示するようにしているのです。
また、スクロール前の最初の画面表示の部分であればHTML5 Canvasでただ単にアニメーションさせる方法もあります。
その他、CSS3であれば簡易なアニメーション、例えばフェードインやフェードアウト、左から右に移動程度であれば対応可能なので、CSSで行っていることも多いでしょう。
 

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

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

PCサイトのスクロール時にふわっとする動きを求めるなら

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

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

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

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

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

visual artができること

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

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

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

  • .

千葉、東京、横浜を中心に全国からホームページ制作を承っております。
ホームページ作成のご相談・お見積は無料です。まずは概算見積をしますのでお気軽にお問い合わせください。

お見積+ご相談(無料)

PAGE TOP