Visual Composerでパララックスエフェクトを簡単に作る方法

美しいパララックスエフェクトがかんたんに

さて今回はビジュアルコンポーザーでパララックスエフェクトをかんたんに実装する方法です。

固定ページの編集画面で「BackendEditor」を選択します。

Add ElementからRowを追加します。

次からがパララックスの為の設定になります。

Row stretch　・・・Rowの横幅を画面一杯に広げるための設定です。
Stretch row and contentを選びます。

Full Height Row・・チェックをいれるとRowの高さを画面一杯にします。

Parallax  ・・・通常のパララックス効果ならSimpleを選択します。

image　・・・パララックスの背景に使いたい画像を選択します。
レスポンシブ対応の高解像度の画像を用意します。

Rowに関する設定はこれだけです。

後はRowの中にテキストや写真の要素を入れることでパララックス効果ができちゃいます。かんたんですね。

Rowを複製して画像だけ入れ替えると簡単に以下のようなパララックスページの出来上がりです。

サンプルページ 

サンプルページでは他にもいくつか高度なテクニックを組みあわせていますのでそのうちご紹介しますね。