パララックスも、スクロール連動も思いのままに。「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 ページを更新します
※ 4月10日に一部のブラウザで正常に動作しない事象が発生しておりましたが改善が完了し、Studio公開サイトにおける推奨閲覧環境では、いずれも問題なく動作することが確認できています。

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

Studio Update Lab ─ Scroll Effect

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

▼アーカイブ動画視聴はコチラから
https://youtu.be/xdHDJ0jxcB0

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

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

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