• 0k
  • 0
Wix 最新情報 \ 2016年8月17日

新スクロールエフェクトでホームページをさらに素敵に!

新しくリリースされたスクロールエフェクト、もう試していただけましたか?立体感を演出したり、あっと驚く方法でコンテンツを表示したり…。

「ズームイン」「リヴィール」「フェードイン」という3つの進化したエフェクトをサイトに取り入れて頂くことで、最先端のWebデザインを実現することができ、皆の記憶に残るような素敵なホームページが完成します。

新しいスクロールエフェクトを体験しよう!

パララックススクロールの魅力

パララックススクロールとは、2-3年前から流行り始めたウェブデザインで、ページをスクロールする際、手前と奥のスクロール速度に差をつけることで、奥行きや立体感を表現するものを指します。

このウェブデザインが流行り始めたのには、いくつか理由があります。

  • 近年、モバイルの普及に伴い、縦長シングルページが増えていること
    =パララックススクロールとの相性が良い
  • スクロールというシンプルな操作のみで、様々な視覚効果を演出できること
  • サイト訪問者の興味を初めからグッと惹き付けることができ、結果、自然とサイト滞在時間が長くなること
  • ストーリー性のあるサイトを作成することができ、効果的に情報を伝達できること

サイトに動きを与えることができるパララックススクロールは、見た目のインパクトだけでなく、サイトのパフォーマンスも上げることができる優秀なWebデザインなのです。

Wixがリリースした新しいスクロールエフェクト

今回、Wixは「ズームイン」「リヴィール」「フェードイン」の3つの新スクロールエフェクトをリリースしました。写真やストリップと組み合わせたり、テキストを加え、あなただけのデザインを作ってみましょう。

以下、各エフェクトの特徴を簡単にご紹介します。併せて、紹介ビデオもご覧ください。

1.「リヴィール」エフェクト

スクロールダウンすると徐々に背景が表示されるエフェクトで、まるで映画のようなストーリー性のあるサイトを作成することができます。訪問者の興味をひき、絶妙なタイミングでその人が知りたいと思っている情報を届ける、ダイナミックでインタラクティブなデザインです。

リビールエフェクト

2.「ズームイン」エフェクト

訪問者の目線を1カ所に集めたい時は、この「ズームイン」エフェクトを使ってみましょう。重要なポイントに焦点を当てることができます。ズームは自然でささやかな動きとなるように工夫されているので、動きがコンテンツの邪魔になることはありません。

ズームインエフェクト

3.「フェードイン」エフェクト

スクロールダウンすることで背景が徐々に明るくなってくる効果をだすことができるのが、「フェ―ドイン」エフェクトです。サイト内の画像や色を強調し、印象に残るサイトを作ることができます。

フェードインエフェクト

新しいエフェクトと、通常のパララックススクロールを組み合わせて使用することもできます。

パララックススクロール

スクロールエフェクトをサイトへ追加する方法

ストリップ上にスクロールエフェクトを追加する場合:

  1. エディタ上の「追加」→「ストリップ」をクリック
  2. ストリップ背景を変更」をクリックし、背景を自分の好きな画像・動画に変更
  3. 設定」(ストリップ背景)をクリックし、「スクロールエフェクト」下のオプションを選択
  4. 保存後、プレビューをクリックし、サイトの動作を確認

ページ背景にスクロールエフェクトを追加する場合:

  1. エディタ上の「背景」をクリック
  2. 「設定」(ページ背景)をクリック
  3. 「スクロールエフェクト」下の「パララックス」を選択
    ※ ページ背景のスクロールエフェクトは、現在、パララックススクロールのみ選択可能です。
  4.  保存後、プレビューをクリックし、サイトの動作を確認

スクロールエフェクトを使って、一味違うホームページを作ってみましょう!

ホームページ作成ならWix


今すぐ Wixブログ を
無料購読しよう!

Wixブログを購読しよう 役立つ情報をいち早くゲット!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email

Wixブログを購読 \ 

WebデザインやWix新機能についての
最新情報を無料でお届けします!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email