Twenty Nineteen + ELEMENTOR で LP もどきページです。

2019年11月13日

昨年11月に公開されたWordPressの新しいデザインテーマ「Twenty  Nineteen」ですが、通常でしたら「Gutenberg」と言う新エディタでページ編集するのですが、筆者はへそ曲がりと言うか拘りが強いのか、例によって「Elementor」でページ編集してみました。

下記の2つの事例は、何れも縦に長いLP仕様になっています。画面は2列の段組みで形成されており、左右の段組みの何れかに画像が挿入されています。画像の無い方にはタイトルとテキスト文が入っています。

画面スクロールによって、左右から「フェードイン」と言うアニメーション効果で、左右からコンテンツが表示されて来るようになっていると思います。

これが「ELEMENTOR」の「Motion Effects」という新しいアニメーション効果となっています。このアニメーション効果はオンマウス画像と違う画像の動きを実現しています。即ち、画像にオンマウスしても画像は動きません。

この「Motion Effects」は、ページが表示される段階でのみ、画像の動きが再現されるだけで、一旦、表示された後は画面の動きは無くなります。これが「開始アニメーション」とも呼ばれるページ表示の仕様となります。

再度、その「Motion Effects」の動きを再現したい時は、ブラウザの再読込ボタン押下で同じ動きが再現できると思います。