パーツの背景に画像や動画などを設定したいが、その方法が分からない。
そんな方にセクションの追加の仕方や背景の変更の仕方を詳しく解説しています。
また、サイトのオシャレを際立出せるパララックスなどもおさえて説明しているのでデザインをよりブラッシュアップしていくために解説に進みましょう！
※冒頭では「セクション追加の仕方」と「セクション背景の追加の仕方」を解説しているので
記事の本題はスクロールエフェクトから目次よりクリックし、読み進めてください。
セクション追加の仕方
まずはセクションを追加します。
各パーツの間にでてくる「セクションを追加」をクリック。
画面左にツールバーがでるので「空のセクション」をクリック。
これでセクションを追加できました。
セクション背景の追加の仕方
追加されたセクション内をクリックすると編集アイコンがでるので「セクションの背景を変更」を選択。
画像や動画を入れることができるので自分のフォルダからアップロードするか、「Wix画像・動画素材」から選択して追加。
これでセクション背景を追加できました。
スクロールエフェクト
セクション背景の使える機能として、まずはスクロールエフェクトをご紹介します！
セクション内をクリックし、「スクロールエフェクトの背景」をクリック。
そうするとの15種類のスクロールエフェクトがでてきます。
実際に使用しやすいスクロールエフェクトをご紹介していきます！
パララックス
スクロールエフェクトの背景 → パララックス をクリック。
設定することでセクション背景の上を通過していくような視差効果が生まれます。
3D
スクロールエフェクトの背景 → 3D をクリック。
設定することでセクション背景の上を通過していくような視差効果が生まれ、スクロールすることで画像が立体的に浮き上がります。
右にパン・左にパン
スクロールエフェクトの背景 → 「右にパン」or「左にパン」 をクリック。
設定することでセクション背景の上を通過していくような視差効果が生まれ、スクロールすることで画像が右にずれていきます。
※左にパンはスクロールすることで画像が左にずれていきます。
フェードアウト
スクロールエフェクトの背景 → フェードアウト をクリック。
設定することでセクション背景の上を通過していくような視差効果が生まれ、スクロールすることで画像が徐々に消えていきます。
ここまで、実際に使用しやすいスクロールエフェクトをご紹介しました。
まだ紹介していないスクロールエフェクトもぜひ試してみてください！
セクション背景の透過
セクション背景の使える機能として、次にセクション背景の透過をご紹介します！
セクションの背景を変更 → 設定 をクリック。
すると画像のような編集項目がでてきます。
「画像の不透明度」の数値を変更することでセクション背景の透過をすることができます。
透過を使うことでセクション背景を違った表現で見せることができます！
まとめ
今回はWixのセクション背景の使える機能を解説いたしました。
基本のセクション追加の仕方、セクション背景の追加の仕方を覚えることでパーツのデザインの幅が広がりました。
スクロールエフェクトを使うことにより、立体的な動きがでてサイトのブラッシュアップができることでしょう！
