2016年8月17日3 分
新しくリリースされたスクロールエフェクト、もう試していただけましたか?立体感を演出したり、あっと驚く方法でコンテンツを表示したり...。
「ズームイン」「リヴィール」「フェードイン」という3つの進化したエフェクトをサイトに取り入れて頂くことで、最先端のWebデザインを実現することができ、皆の記憶に残るような素敵なホームページが完成します。
パララックススクロールとは、2-3年前から流行り始めたウェブデザインで、ページをスクロールする際、手前と奥のスクロール速度に差をつけることで、奥行きや立体感を表現するものを指します。
このウェブデザインが流行り始めたのには、いくつか理由があります。
近年、モバイルの普及に伴い、縦長シングルページが増えていること
=パララックススクロールとの相性が良い
スクロールというシンプルな操作のみで、様々な視覚効果を演出できること
サイト訪問者の興味を初めからグッと惹き付けることができ、結果、自然とサイト滞在時間が長くなること
ストーリー性のあるサイトを作成することができ、効果的に情報を伝達できること
サイトに動きを与えることができるパララックススクロールは、見た目のインパクトだけでなく、サイトのパフォーマンスも上げることができる優秀なWebデザインなのです。
今回、Wixは「ズームイン」「リヴィール」「フェードイン」の3つの新スクロールエフェクトをリリースしました。写真やストリップと組み合わせたり、テキストを加え、あなただけのデザインを作ってみましょう。
以下、各エフェクトの特徴を簡単にご紹介します。
スクロールダウンすると徐々に背景が表示されるエフェクトで、まるで映画のようなストーリー性のあるサイトを作成することができます。訪問者の興味をひき、絶妙なタイミングでその人が知りたいと思っている情報を届ける、ダイナミックでインタラクティブなデザインです。
訪問者の目線を1カ所に集めたい時は、この「ズームイン」エフェクトを使ってみましょう。重要なポイントに焦点を当てることができます。ズームは自然でささやかな動きとなるように工夫されているので、動きがコンテンツの邪魔になることはありません。
スクロールダウンすることで背景が徐々に明るくなってくる効果をだすことができるのが、「フェ―ドイン」エフェクトです。サイト内の画像や色を強調し、印象に残るサイトを作ることができます。
新しいエフェクトと、通常のパララックススクロールを組み合わせて使用することもできます。
ストリップ上にスクロールエフェクトを追加する場合:
エディタ上の「追加」→「ストリップ」をクリック
「ストリップ背景を変更」をクリックし、背景を自分の好きな画像・動画に変更
「設定」(ストリップ背景)をクリックし、「スクロールエフェクト」下のオプションを選択
保存後、プレビューをクリックし、サイトの動作を確認
ページ背景にスクロールエフェクトを追加する場合:
エディタ上の「背景」をクリック
「設定」(ページ背景)をクリック
「スクロールエフェクト」下の「パララックス」を選択
※ ページ背景のスクロールエフェクトは、現在、パララックススクロールのみ選択可能です。
保存後、プレビューをクリックし、サイトの動作を確認