STUDIOで作るモーションレシピ【ブレンドモード】

2023年3月9日 14:12

こんにちは。アドパブのシュンです。
今回はノーコードツールSTUDIOを使って、
「ブレンドモード」を使ったアニメーションを作っていきます。

STUDIO制作代行のサービス

弊社、株式会社アドパブリシティではSTUDIO制作代行を行っています。
興味、ご相談のある方は下記リンクからご確認ください。

フィルターとは、画像に対して様々な効果を加えることができる機能です。例えば、画像をぼかしたり、色を変えたりすることで画像の印象を変えることができます。

STUDIOには画像を加工できる「ブレンドモード」の機能がついています。
画像を選択し、画面左上から「重ね順」の隣にある矢印をクリック。
すると、「ブレンドモード」「フィルター」「背面フィルター」が登場します。

STUDIOでアニメーションを作成するには、以下の手順を実行します。

まずは、アニメーションを作成したい画像をSTUDIOのページに配置します。画像は、テキストやボタンと同じように、ドラッグ＆ドロップで配置することができます。

次に、画像を選択し、画面上のタブから「画像」を選択します。
画面右上から「条件付きスタイル」→「ホバー」を選んでください。

ここで、適用したいフィルターを選択することができます。例えば、画像をぼかすには「ぼかし」フィルターを選択します。

フィルターを選択したら、そのフィルターのパラメーターを設定します。例えば、ぼかしフィルターの場合は、ぼかしの強さや方向を設定することができます。
今回はぼかしを「10px」鮮やかを「2」に設定しています。

最後に、テキストアニメーションを設定します。
以上の手順で、簡単にアニメーションを作成することができます。ぜひ、STUDIOのフィルターを使って、オリジナルのアニメーションを作成してみてください！