ブログ - 2021-10-03 20:29:00

【パララックス効果】スクロールして楽しいWebデザイン【PC推奨】

Posted by 江口 史和里
Shiori Eguchi

みなさんこんにちは!

 

ホームページ制作の途中、

『スクロールしているけど、動かない背景ってどうやるんだろう??』

とふと思い、検索してみたところ

”パララックスページ” ”パララックス効果”と呼ばれるものでした。

パララックス=視差効果、という意味だそう。

 

まずは、特に効果をいれていないサンプルページ☟

 

 

そしてパララックス効果いれてみました☟

奥行きを感じますね〜〜〜

背景が動かないだけで、ここまで雰囲気が変わるとは・・

 

ピークスマインドが応援している学生団体Stay Kyushuさまのホームページでも

使用してみました。☞【学生団体Stay Kyushu】

 

 

色々と調べてみると、パララックスを使用した

面白いWebサイトがあったので2つご紹介します^^

 

1.Porsche Volution

 

福岡|九州|映像制作|プロジェクションマッピング|ドローン|ホームページ|ライブ配信|特殊撮影|イベント|レーザー|特殊効果|CG制作|写真撮影|youtube|チャンネルプロデュース|モデル|音響|照明|レンタル|キャラクターデザイン|ロゴデザイン

ホームページはこちら ※PC推奨

ポルシェの歴史を辿るようなWebデザインとなっており

スタイリッシュでかっこいいホームページです!

車がどんどん変身していくようで、美しい視差効果だなと思います^^

 

 

2.Every Last Drop

 

福岡|九州|映像制作|プロジェクションマッピング|ドローン|ホームページ|ライブ配信|特殊撮影|イベント|レーザー|特殊効果|CG制作|写真撮影|youtube|チャンネルプロデュース|モデル|音響|照明|レンタル|キャラクターデザイン|ロゴデザイン

ホームページはこちら ※PCでもスマホでもOK!

”水を大切にしましょう”というコンセプトのもと、制作されたホームページになります。

 

以前ご紹介した、【Googleサンタを追いかける】と通ずるような

スクロールにあわせて動く、アニメーションWebページです。とてもかわいい。

 

 

以上2つご紹介いたしました!

是非スクロールしてお楽しみください^^

 

Posted by Shiori Eguchi
<Remote>WEBコーダー/クリエイター 江口 史和里

江口 史和里が書いたその他記事

2022-01-23
今年の一文字
2019-12-22
かごしまの旅

ブログ TOP

ブログ 2021-04-16 19:10:00

  今回は3DCGを扱う方必見!   ビル群や街並みの3Dモデルを使って映像制作をしたい時、   自 ...


ブログ 2024-08-31 22:01:00

Cinema 4Dでモーショントラッキングしたリグを キャラクターに割り当てる方法についてご紹介します。 今回は、Cinema 4Dのト ...


ブログ 2022-12-05 10:35:00

    こんにちは、お久しぶりですひきちです!     ピークスマインドに入社して3年目に ...


ブログ 2021-03-28 22:03:00

こんにちは!!   かいとです!!   今回もロケーション撮影についてです。   皆さんにとって思 ...


ブログ 2023-04-17 00:00:00

こんにちは、瀬元です!   少し前ですが、4/3(月)に待ちに待った入社式がありました! 3月で学生が終了し、いよいよ社会人 ...


ブログ 2019-08-30 01:30:00

  こんばんは、セキ です☺️   先ほど投稿した武雄神社 すごくたのしかったんです((o(^∇^) ...


ブログ 2025-05-30 20:07:00

      最近、夏風邪気味の貝島です。 夏風邪と言っておも、まだ梅雨なので、ただ、鼻炎 ぎみなだけで ...


ブログ 2022-03-18 15:01:00

こんにちは!クリエイターの深田雄太です!映像制作ってすごいよね!感動した!どんなことを考えて、どんなふうに作っているの?と最近よく聞かれます ...


ブログ 2020-05-29 00:12:00

こんにちは   Apple製品大好きほーりーです。         &n ...


ブログ 2026-08-15 18:55:00

みなさんこんにちは!毎週灰と雨に悩まされてる秀良です。突然ですが、思い出の映画館ってありますか?初めて映画を観た場所だったり、家族や友達、恋 ...