パララックスも、スクロール連動も思いのままに。「Scroll Effect」が遂にリリース。

「Scroll Effect」がStudioに登場。スクロール位置や画面内に入るタイミングに応じて、要素の動きをコントロールできるようになりました。
パララックスやスクロール進行に応じたアニメーションなど、これまで以上に動きのあるWebサイトを、Studioだけで直感的に制作できます。

スクロールに合わせて、動きをコントロール

「スクロール位置」「位置の移動や不透明度などのスタイル」「アニメーションのトリガー」３つのアニメーション設定が可能になりました。
ページ全体の進行に合わせて動きをつけたり、要素が画面に入るタイミングで変化させたりと、スクロール位置に応じて要素を変化させることが可能です。

「Scroll Effect」の利用例

【PC版のみ】プレビューURL - スクロールしてお試しください

【PC版のみ】プレビューURL - スクロールしてお試しください

【PC版のみ】プレビューURL - スクロールしてお試しください

【PC版のみ】プレビューURL - スクロールしてお試しください

【PC版のみ】プレビューURL - スクロールしてお試しください

【PC版のみ】プレビューURL - スクロールしてお試しください

ノーコードで、より自由なWeb表現へ

「Scroll Effect」の登場で、Studio上でのアニメーション表現の幅がさらに広がりました。ぜひ、「Scroll Effect」で、新しいWebサイトの表現をお試しください。

関連ヘルプ記事

「Scroll Effect」の使い方や設定できる項目の詳細は、ヘルプ記事をご覧ください。

• スクロールアニメーションを設定する（Scroll Effect）

※ Scroll Effectは現在、ベータ版として提供中の公開サイト新基盤には未対応です。対応完了次第、公開サイト新基盤 (beta) Issues ページを更新します

「Scroll Effect」を学べるオンラインイベントを開催

4.23（木）12:00〜13:00
Studio Update Lab ─ Scroll Effect

「Scroll Effect」で可能となったスクロール連動のアニメーションについて、いち早く深掘りするオンラインイベント。Studioプロダクトスペシャリスト2人が実践しながら、皆さんからの質問にリアルタイムで回答します。

▼イベント詳細・参加登録はこちら
https://luma.com/studio_updatelab_scrolleffect

4.28（火）12:00〜13:00
Studio Workshop | 初めてのスクロールエフェクト

「Scroll Effect」を活用して、スクロール連動のアニメーションを設定する方法を、具体的にステップごとに解説します。

▼イベント詳細・参加登録はこちら
https://luma.com/studio_workshop_scrolleffect