Wix セクション背景の使える機能まとめ！【パララックスなどを用いてサイトをオシャレにする】

namahage — Sun, 13 Nov 2022 05:38:45 +0000

パーツの背景に画像や動画などを設定したいが、その方法が分からない。
そんな方にセクションの追加の仕方や背景の変更の仕方を詳しく解説しています。

また、サイトのオシャレを際立出せるパララックスなどもおさえて説明しているのでデザインをよりブラッシュアップしていくために解説に進みましょう！

※冒頭では「セクション追加の仕方」と「セクション背景の追加の仕方」を解説しているので
記事の本題はスクロールエフェクトから目次よりクリックし、読み進めてください。

セクション追加の仕方

まずはセクションを追加します。
各パーツの間にでてくる「セクションを追加」をクリック。

画面左にツールバーがでるので「空のセクション」をクリック。
これでセクションを追加できました。

追加されたセクション内をクリックすると編集アイコンがでるので「セクションの背景を変更」を選択。

画像や動画を入れることができるので自分のフォルダからアップロードするか、「Wix画像・動画素材」から選択して追加。
これでセクション背景を追加できました。

セクション背景の使える機能として、まずはスクロールエフェクトをご紹介します！

セクション内をクリックし、「スクロールエフェクトの背景」をクリック。
そうするとの15種類のスクロールエフェクトがでてきます。

実際に使用しやすいスクロールエフェクトをご紹介していきます！

スクロールエフェクトの背景　→　パララックス　をクリック。
設定することでセクション背景の上を通過していくような視差効果が生まれます。

スクロールエフェクトの背景　→　3D　をクリック。
設定することでセクション背景の上を通過していくような視差効果が生まれ、スクロールすることで画像が立体的に浮き上がります。

スクロールエフェクトの背景　→　「右にパン」or「左にパン」　をクリック。
設定することでセクション背景の上を通過していくような視差効果が生まれ、スクロールすることで画像が右にずれていきます。
※左にパンはスクロールすることで画像が左にずれていきます。

スクロールエフェクトの背景　→　フェードアウト　をクリック。
設定することでセクション背景の上を通過していくような視差効果が生まれ、スクロールすることで画像が徐々に消えていきます。

ここまで、実際に使用しやすいスクロールエフェクトをご紹介しました。
まだ紹介していないスクロールエフェクトもぜひ試してみてください！

セクション背景の使える機能として、次にセクション背景の透過をご紹介します！
セクションの背景を変更　→　設定　をクリック。

すると画像のような編集項目がでてきます。
「画像の不透明度」の数値を変更することでセクション背景の透過をすることができます。

透過を使うことでセクション背景を違った表現で見せることができます！

背景色を白で透過50%

背景色を黒で透過50%

今回はWixのセクション背景の使える機能を解説いたしました。
基本のセクション追加の仕方、セクション背景の追加の仕方を覚えることでパーツのデザインの幅が広がりました。
スクロールエフェクトを使うことにより、立体的な動きがでてサイトのブラッシュアップができることでしょう！

Pickup記事

請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。請求書作成のオンラインサイトは「MISOC…

Pickup記事

初心者向けガイド！ChatWork（チャットワーク）の使い方【基本的な機能をまるっと解説】ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま…