企業のロゴや画像、文字などが画面の左右からゆっくりと絶えず流れているパーツを作りたい。
意外と使えるパーツなので、Wixを使っている方にぜひ届けたい。そんな思いでこの記事を書きました。
今回はWixで画像の無限ループを作る方法を解説します！
完成イメージ
画像の無限ループがよく分からないと思いますので、まずは完成イメージを動画で見てみましょう！
画面横幅いっぱいに画像が並び、右から左にたえず流れています。Webサイトでもたまに見るパーツですね。
実際のサイトへの応用例
→参考 : 架空HP制作会社LP（トップページのCONCEPT箇所）
また、このようなテキストの画像を使うことで文字が流れるように見せることもできます。
作り方レシピ
ではさっそく作り方を解説していきます。パーツの追加から見ていきましょう。
パーツの追加
サイト編集 → 画面左にあるツールバー → 「＋」の追加ボタン → ギャラリー → プロギャラリー → ショーケース を選択。
するとショーケースのパーツが追加されます。
画像の追加・変更
追加したショーケースのパーツをクリックし、「メディアを管理」を選択。
そうすると、このような画面になります。
画像を追加したい場合は「新しく追加」から、変更したい場合は変更したい画像を選択し「画像を変更」からアップロードし、編集します。
パーツの編集
ここからショーケースのパーツの編集をしていきます。
横幅の調整
ショーケースのパーツをクリックし、 ストレッチ → 全幅に引き伸ばす のチェックを入れる。
すると画面横幅いっぱいにパーツが広がります。
高さの調整
画像のようにパーツの高さをドラッグして調整します。
無限ループスライド設定
ショーケースのパーツクリックし、 設定 → レイアウト をクリック。
- 画像をループ表示にチェックをいれます。
- 自動でスライドにチェックをいれます。
- 連続にチェックをいれます。
- ホバーで一時停止のチェックを外します。
- 速度や間隔の数値を調整します。
以上を設定すると簡単に画像の無限ループが作成できます！
オプション設定
上記の動画を見ると画像をホバーしたときに背景色とハートのアイコンがつき、クリックしたときに画像のポップアップが表示されてしまうのでクリックしても何も起こらない仕様に変更します。
ホバー時の背景色をなくす
ショーケースのパーツをクリックし、 設定 → デザイン → オーバーレイ・アイコン をクリック。
オーバーレイ色の数値を「0%」に変更します。
ホバー時のハートアイコンをなくす
ショーケースのパーツをクリックし、 設定 → ハートアイコン のチェックを外す。
クリック時のポップアップ表示をなくす
ショーケースのパーツをクリックし、 設定 → クリック時のアクション を見る。
選択項目がデフォルトで「拡大表示で開く」になっているので「なし」に変更。
上記の各オプション設定をすることで完成イメージのような画像の無限ループを作ることができるので
ぜひ試してみてください！
まとめ
今回はWixで画像の無限ループを作る方法を解説しました。
意外と使えるパーツなので、デザインのパターンとして覚えておくと良いと思います。
ここまで解説したWixで画像の無限ループを作る方法を使い、理想とするWebサイトに一歩近づく助けになることが出来たら幸いです！
