ThemifyのScroll Effectの設定方法を紹介します。
ThemifyではScroll Effectをデフォルトのアニメーション機能の一つとして設定することができます。
一般的にスクロールエフェクトをWEBサイトに設置するためには、CSSやJS（JavaScript）の活用が必須です。
しかし、Themifyテーマを使えば、誰でも簡単に、写真やテキストなどにスクロールエフェクトを設定することができます。
今回はその設定方法について紹介します。
目次
Scroll Effctとは？
Scroll Effect（スクロールエフェクト）とは、ウェブサイトやアプリケーションにおいて、ユーザーが画面をスクロールする際に生じる視覚的な変化や動きのことを指します。
スクロールエフェクトは、ユーザーがコンテンツをスクロールすることで起こる自然なアニメーションや変化を利用して、ウェブサイトやアプリのデザインやユーザーエクスペリエンスを魅力的にするために使用されます。
この機能のことをThemifyのブログでは”視差スクロール”と表現したりしていますし、ビルダープラグインのElementerでは”モーションエフェクト”と表現していたりするので誤解してしまうかもしれませんが、概念的には、微妙な違いがります。
詳しくは⇒ スクロールエフェクトとは？の記事で紹介します。
Themifyで設定できるScroll Effect一覧
ThemifyではCSSやJS（JavaScript）を使用せずにスクロールエフェクトを設定できますが、その分、”できること”には限りがあります。
ここでは、Themifyで設定できるScroll Effectを紹介します。
Vertical Scroll
vertical Scroll（垂直スクロール）は、スクロールに応じて設定対象を、上下に移動させることができます。
Horizontal Scroll
Horizontal Scroll（水平スクロール）は、スクロールに応じて設定対象を、左右に移動させることができます。
Transparency
Transparency（透明度）は、スクロールに応じて設定対象を、徐々に透明にしたり、透明から出現させたりできます。
Blur
Blur（ぼかし）は、スクロールに応じて設定対象を、徐々にぼかしたり、ぼやけた状態から明確にさせたりできます。
Rotate
Rotate（回転）は、スクロールに応じて設定対象を、右回りや左回りの回転させることができます。
Scale
Scale（スケール）は、スクロールに応じて設定対象を、大きくしたり小さくしたりできます。
Scroll Effectを組み合わせて設定する
ThemifyのScroll Effectは、複数のものを組み合わせて設定することもできます。
例えば、Vertical ScrollとHorizontal Scrollを組み合わせて、右斜め上方向に移動させる、ということができます。
また、BlurとScaleを組み合わせて、拡大するとともに徐々にぼかしていくということもできます。
このように、ThemifyのScroll Effectの種類を複数組み合わせることで、さまざまな効果を引き出すこともできるので、アイデア次第で、面白い動きをするWEBサイトを作ることもできます。
ThemifyのScroll Effectの対象
Themifyでは、Scrool Effectを設定できるものは写真やテキストだけではありません。
じつはほぼ全てのModules（Themifyが提供しているパーツ）と背景に当たるRowにも設定できてしまいます。
具体的には、ModulesやRowの編集画面にAnimationのタブが表示されるもの（画像参照）なら、Scroll Effectを設置できます。
ThemifyのScroll Effectの設定方法
では本題のThemifyビルダーを使ってのScroll Effectの設定方法を紹介します。
こちらのビデオでも触れているので、動画の方が良い方は、そちらをご覧ください。
ThemifyのScroll Effectの設定方法はシンプルです。
設定したいmodulsを選択し、設定画面を開き、Animationタブをクリック。すると、Motionタブの中に、設定できるScroll Effectが表示されているので、あとは設定したいEffectを選択するだけです。
Vertical Scrollの設定方法
例えば、VerticalScrollの場合、設定できる項目はDirection(方向)、Speed、Viewportの３つです。
- VerticalScrollのDirectionはUPかDOWNの選択肢があります。スクロールに応じて、上方向に移動させたい場合、UPを選択します。
- Speedは移動する速さを1〜10の10段階で設定できます。10にすると移動速度が早く、1にすると遅くなります。
- ViewportはScroll Effectを動作させる範囲を0〜100%の間で設定できます。0％は画面の一番下、100％は画面の一番上を意味します。
つまり、画面の高さの割合に応じて、画面のどこからどこの範囲で動作させるのか？を設定できます。
0%〜100%で設定している場合、画面の下部に対象が表示されたら動作を開始し、画面の上部に対象が達したら、動作を終了します。
ちなみに、ThemifyのScrollエフェクトは、設定対象のTop部分（上部分）がViewoportの判断対象になります。（Elementerは対象の中心だったと思います）
他のEffectも基本的に同様の設定方法になります。
ThemifyのScroll Effectの設定方法まとめ
ThemifyのScroll Effectで設定できるEffectは少ないように感じるかもしれませんが、組み合わせ次第でいろいろなEffectを設定できます。
CSSやJS（JavaScript）を使わずに気軽に設定できるので、ぜひ、いろいろ試してみてください。
Themifyのダウンロードはこちら
Themifyに興味を持った方は、とりあえず試してみることをオススメします。
下記ボタンリンクから購入していただいた方へは、まだ準備中ですが、LP（ランディングページ）制作などに使える、レイアウトテンプレートをプレゼントします。
