↓↓ スクロールプリーズ ↓↓
はじめに
ポートフォリオに動きを加えたいと考え、JavaScriptのスクロールイベントについて調べてみました。スクロールイベントを活用すると、Webサイトに様々なインタラクションを組み込めるようです。今回は、私がやってみたいと思ったパララックス効果についてコードペンで実践してみました。
パララックスとは
日本語で訳すと「視差効果」という意味で、視差効果とはホームページに動きを出したり、画面に奥行きがあるように表示したり、立体的な動きの効果を出したりする演出効果のことです。すごく簡単に言うと「スクロールと一緒に動くアニメーション」のことです。
大きく分けて3種類の基本的なパララックスデザインがあるようでしたので紹介します。
3種類の実装
- 1. スクロールに応じて要素が動く
- スクロールに応じて各要素にアニメーションを発動させます。
-
See the Pen スクロールフェードイン by R.Tanaka (@TanakaR)on CodePen.
- 2. スクロールすると要素がズレる表現
- 一部の要素だけスクロール速度とズラして表現します。
-
See the Pen スクロールとズレて要素がスクロール by R.Tanaka (@TanakaR)on CodePen.
- 3. スクロールに応じて次の要素が重なる表現
- 要素が重なっていくことで紙芝居のような表現になります。
-
See the Pen セクションが重なるようにスクロール by R.Tanaka (@TanakaR)on CodePen.
私が感じた メリット デメリット
メリット
- デザインの幅が広がる
- 視覚的な魅力がプラスできる
- 情報の強調ができる
デメリット
- 読み込みが遅い
- 使い方に気をつけないと重要な内容が伝わりにくい
- 好みが分かれる
感想＆今後の課題
今回はスクロールイベントを使用するパララックスについて調べて実装してみましたが、デザインの知識が少ない私にはデザインの引き出しが増えて良かったです。また、パララックスを使用したWEBサイトをたくさん見てみたのですが、動きが多くて内容が伝わってこないサイトもあったので、デメリットには十分に気を付けたいと思いました。
今後の課題も引き続きjavascriptのコードが自分で書けるようになることですが、『ユーザーに伝わりやすい』WEBサイトが作れるようにデザイン知識も増やしていきたいと思います。
第８回朝礼