ウィックス視差効果

• 四月 29, 2024

Wix Webサイトで見られる素晴らしいアニメーションの1つに、視差スクロール効果があります。それは本当のアニメーションではありませんが、それはあなたのウェブページに動き、深さ、次元の幻想を加えます。

この効果は数年前から人気があり、圧倒的なアニメーションを追加せずにWebサイトに少し興味を持たせる良い方法です。ページ上の他の要素よりも遅い速度で背景画像をスクロールするようにブラウザに指示すると、視差スクロールが作成されます。ご想像のとおり、スクロール効果は、長い1ページのWebサイトに最適です。

この手法は、JavaScript、CSS、およびdiv要素を使用して作成されます。念頭に置いておくと、ほとんどのモバイルデバイスには固定のバックグラウンドCSSの問題があります。そのため、Wixはモバイルデバイスの効果をオフにします。

しかし、Wix Webサイトを作成するときは、コーディングは必要ありません。背景画像またはストリップ画像に視差オプションを選択するのと同じくらい簡単です。ストリップビデオに追加することもできます。

視差スクロールが適用されていない場合、Webページの背景画像は、視聴者がページ上をスクロールするときにページ上の他の要素と一致して移動します。

ただし、Parallaxスクロール効果を背景画像に適用すると、視聴者がページ上をスクロールするときに背景画像がゆっくりとスクロールします。寸法は、ページ上の他の要素が背景画像よりも速くスクロールするときに発生します。

背景画像のスクロール効果オプションの3番目のオプションである[フリーズ]オプションは、残りのページ要素が上下にスクロールするときに背景画像を所定の位置にロックします。

背景画像に視差を追加

1. 左側のメニューの[背景]アイコンをクリックします。
   
   
2. 通常どおり背景画像を追加します。
   
   
3. [設定]ボタンをクリックして、画像設定を開きます。
   
   
4. スクロール効果の3つのオプションのいずれかを選択します。
   
   
   • なし-背景はページ上の他の要素と同じ速度で移動します。
     
     
   • 視差-背景は、ページ上の他の要素よりも遅く移動します。
     
     
   • フリーズ-背景はそのまま残りますが、他の要素はスクロールします。
     
     

視差を画像またはビデオのストリップに追加

1. ストリップを選択し、ポップアップメニューから「ストリップの背景を変更」を選択します。
   
   
2. 通常どおり、背景画像またはビデオを追加します。
   
   
3. [設定]ボタンをクリックして、画像設定を開きます。
   
   
4. 次に、スクロール効果から視差を選択します。