さて、最近スクロールすると文字や写真がふわっと表示されるようなPCサイトをよく見ますよね。
スクロールエフェクトやパララックスと呼ばれるサイトのことです。
当サイトのトップページ「ホームページ制作 千葉 visual art」もモニター幅が広いバージョンではスクール時にふわっと文字や画像が表示されるようになっています。
目次
概要
いったいどのようにしているのかというと、ざっくりいうと、JQueryなどを利用してスクロールがある程度いくと画面や文字を表示するようにしているのです。
また、スクロール前の最初の画面表示の部分であれば、CSSのみで行ったり、動画で制作したりする方法もあります。
CSS3であれば簡易なアニメーション、例えばフェードインやフェードアウト、左から右に移動程度であれば対応可能なので、CSSで行っていることも多いでしょう。
JQueryとCSS3でのスクロールエフェクト（PC+スマホ）
JQueryとCSS3を組み合わせて一から作成すれば、JQueryでスクロールの位置によってclassを設定し、それに伴う動きなどをCSSで設定すればプラグインにはない細かな設定も可能です。
JQueryとCSS3のアニメーション関係の知識も必要になり、もちろんそれに伴い手間もかかるので費用もかかる形になります。
（参考：ブランドストーリー（造園会社の魅力）が伝わるWEBサイト）
PC、スマホ、タブレットのそれぞれにあった設定をしてあげれば、うまく動作させることができるので費用をかけてもいいのであればお勧めです。
PCサイトのスクロール時にふわっとする動きを簡易に求めるなら
PCサイトだけであれば、FadethisなどのJQueryプラグインを利用して対応するのが費用の面を考慮するとお勧めです。
デフォルトの設定だと単調な面白みの欠けるものになるかもしれません。
少し手間はかかりますが、オプションで各パーツの表示されるスピードやタイミングを各自設定することによってリズムのついた面白いサイトを表現することが可能です。
スマホやタブレットにも設定はできなくはないですが、少し動き（反応）が悪いような感じが私はします。
あくまでも簡易なものならFadethisなどのJQueryプラグイン、ちゃんとこだわった動きならJQueryとCSS3を組み合わせて一から作成する形をおススメします。
スクロール前の最初の画面でインパクトを求めるなら動画（PC+スマホ）
実写の映像とアニメーションのミックスでインパクトのある動画で作成するという方法もありかと思います。
（参考：ロゴからの映像で魅せる企業ブランディング）
それなりに費用がかかるので、トップページだけなどインパクトを出したいページだけに使うのが良いでしょう。
スクロール前の最初の画面でインタラクティブならHTML Canvas アニメ（PC+スマホ）
昔のフラッシュに近いインタラクティブである程度凝ったアニメーションの場合は、HTML Canvas アニメという手もあります。
昔流行ったFlashほどの凝ったものや映像を加えたものは厳しいですが、それなりに面白いロゴのアニメーションなどインパクトのあるものをPC用、スマホ用に作成できます。
（上記は映像で録画したもの。参考：制作会社の個性「らしさ」が伝わるホームページ）
スクロール前の最初の画面で費用を抑えて控えめな動きでいいなら（PC+スマホ）
動きを入れない、でも費用は極力抑えたいということであれば、CSS3でのアニメーションが良いでしょう。
一部の文字や画像を左から右に少し移動しつつ、フェードインで表示させたりする程度になりますが、動きによって多少目を引くページになります。一定のパターンで作成して、同じ構造のページに当てはめたりすることもPC用、スマホ用共に可能なので、費用を抑えつつ共通化した下層ページの見出し部分などで使用することが可能です。
visual artができること
visual artではJQueryとCSS3でのスクロールエフェクトやパララックスサイトからadethisなどのJQueryプラグインを使用しての動き、実写とアニメーションの動画やHTML Canvas アニメをはじめ、CSS3での簡易なアニメーションまで様々なホームページ作成を承っております。
デザインやアニメーションの凝り具合によって費用は変わってきますので、「お見積+ご相談」ページからまずはお気軽にお問い合わせください。
ホームページ制作料金プラン
