--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/design/animation-tab' title: 'スクロール・ホバー・クリックでエレメントに動きを付ける | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:27:17+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- セクション、ロー、コンテンツエレメントは動かせます。スクロールで表示される見出しをフェードアップさせ、少し遅れてボタンを続けたり、ホバーでアイコンをパルスさせたりできます。いずれも設定にAnimationパネルがあります。例では見出しをフェードインし、少し遅れて登録ボタンをフェードインします。 動画ではセクションの表示に合わせてボタンと見出しをフェードインしています。 tags: - Ontwerpgidsen image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:27:17+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: スクロール・ホバー・クリックでエレメントに動きを付ける description: |- セクション、ロー、コンテンツエレメントは動かせます。スクロールで表示される見出しをフェードアップさせ、少し遅れてボタンを続けたり、ホバーでアイコンをパルスさせたりできます。いずれも設定にAnimationパネルがあります。例では見出しをフェードインし、少し遅れて登録ボタンをフェードインします。 動画ではセクションの表示に合わせてボタンと見出しをフェードインしています。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:27:17+0000' dateModified: '2026-10-24T11:27:17+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/design/animation-tab' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/design/animation-tab' description: |- セクション、ロー、コンテンツエレメントは動かせます。スクロールで表示される見出しをフェードアップさせ、少し遅れてボタンを続けたり、ホバーでアイコンをパルスさせたりできます。いずれも設定にAnimationパネルがあります。例では見出しをフェードインし、少し遅れて登録ボタンをフェードインします。 動画ではセクションの表示に合わせてボタンと見出しをフェードインしています。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: ホーム item: 'https://dxpr.com/ja' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ja --- [Help Center](/ja/node/75)/[Documentation](/ja/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # スクロール・ホバー・クリックでエレメントに動きを付ける. Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen ## In this guide Related guides - [ホバーでエレメントを反応させる](/ja/hc/documentation/learn-dxpr-builder/design/hover-effects) - [セクションに色・写真・グラデーションを敷く](/ja/hc/documentation/learn-dxpr-builder/design/backgrounds) - [カルーセルレイアウトを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/carousel-layout) セクション、ロー、コンテンツエレメントは動かせます。スクロールで表示される見出しをフェードアップさせ、少し遅れてボタンを続けたり、ホバーでアイコンをパルスさせたりできます。いずれも設定に**Animation**パネルがあります。例では見出しをフェードインし、少し遅れて登録ボタンをフェードインします。 動画ではセクションの表示に合わせてボタンと見出しをフェードインしています。 ## 見出しとボタンをフェードインする 1. 空のコンテンツエリアで**Add Elements**をクリックし、**Layout**タブから**Section**を選びます。 2. セクションにホバーして**More > Settings**を開きます。 3. 対象は**HTML classes**で、**Align text center**を選んで**Save**をクリックします。 4. セクションの**+**をクリックし、**Content**タブから**Button**を選びます。設定が開きます。 5. 入力するのは`Register now`を**Title**に、`/register`を**Link**に入力することです。 6. 開くのは**Animation**パネルで、**Animation start**を**On appear**に設定します。 7. 設定するのは**Animation in**で、**fadeInUp**にします。 8. 対象は**Hidden**で、**Before in-animation**にチェックします。 9. 設定するのは**In-delay**で、600にして**Save**をクリックします。 10. セクションの**+**を再度クリックし、**Content**タブから**Text**を選びます。ボタンの上に配置されます。 11. 見出しを入力し(例: `Open day 2026`)、エディターツールバーで**Heading 2**に設定します。 12. 開くのは**Animation**パネルです。ボタンと同様に**On appear**、**fadeInUp**、**Before in-animation**を選びます。 13. 設定するのは**Duration**で、800にして**Save**をクリックします。 14. ツールバーの**Save**をクリックします。 15. ビューメニュー(ツールバーの目のアイコン)を開き、**Preview**を選びます。 ## 試せるその他のエフェクト - **Scroll reveal:** **On appear**、**fadeInUp**、**Before in-animation**と**Duration**の800。 - **Staggered cards:** 3つのカードに同じエフェクト。**In-delay**は0、200、400。 - **Attention pulse:** **On appear**、**pulse**、**Infinite**はオン、**Duration**は1500。 - **Hover pulse:** **On hover**、**pulse**、**Parent number**は0。反応するのはエレメント自体のみです。 - **Tab reveal:** **On trigger**とタブ内エレメントの**fadeIn**。タブを開くたびに再生されます。 ## 表示内容 テキストを保存するとエディターは両方のエフェクトを再生します。見出しは800ミリ秒かけてフェードアップし、ボタンは600ミリ秒遅れて続きます。訪問者にはセクションのスクロール表示時に同じ内容が見えます(ページ読み込みごとに1回)。**Before in-animation**にチェックがあるため、両方はエフェクト開始まで非表示のままです。 ## 設定 | 設定 | 動作 | デフォルト | |---|---|---| | **Animation start** | エフェクトの再生タイミング。**On appear**(スクロールで表示)、**On hover**、**On click**、**On trigger**(エレメントを含むカルーセルスライド、タブ、トグルが開いたとき) | **No animation** | | **Animation in** | 入場エフェクト。フェード、スライド、ズーム、フリップ、バウンス・パルス・シェイクなどの注目エフェクト | **No animation** | | **Animation out** | 終了エフェクト。同じ一覧から選びます。**On hover**と**On trigger**でのみ表示されます | **No animation** | | **Hidden** | **Before in-animation**はエフェクト再生までエレメントを非表示にします。**After in-animation**はエフェクト終了後に非表示にします | なし | | **Infinite** | 際限なくエフェクトを繰り返します | オフ | | **Appear boundary** | 対象は**On appear**の場合で、エフェクト開始位置の画面下からの距離で、画面高のパーセント値です。0はエレメントのスクロール表示時に開始し、100は画面1つ分手前で開始します | 100 | | **Duration** | エフェクトの長さ。0〜3000ミリ秒 | 1000 | | **In-delay** | 入場再生前の待機時間。最大10000ミリ秒 | 0 | | **Out-delay** | 終了再生前の待機時間。最大10000ミリ秒 | 0 | | **Parent number** | 対象は**On hover**と**On click**で、訪問者が指す・クリックするエレメントを指定します。0はエレメント自体、1は親、2は親の親です | 1 | カラムには**Animation**パネルがありません。レイアウトエレメント内の単独のタブ、トグル、スライドも同様です。代わりに内部のエレメントにアニメーションを付けます。 ## アニメーションが表示されない場合 - **エレメントが表示されません。** **Before in-animation**はエフェクト再生まで非表示にしますが、**Animation in**が**No animation**です。**Animation in**でエフェクトを選びます。 - **エフェクトは1回再生して停止しました。** **On appear**はページ読み込みごとに1回再生します。再度見るにはページを再読み込みするか、繰り返すエフェクトには**Infinite**をオンにします。 - **訪問者がエレメントに到達する前にエフェクトが始まります。** **Appear boundary**が高くなっています。100ではエレメントのスクロール表示より画面1つ分手前でエフェクトが始まります。**Animation**パネルで0に設定します。 - **エレメント付近へのホバーでエフェクトが始まります。** **Parent number**が1のため、親がポインターを監視しています。**Parent number**を0に設定します。 ## 次のステップ - [ホバーエフェクト](/hc/documentation/learn-dxpr-builder/design/hover-effects)：ポインターがエレメント上にある間の色・影・不透明度を変更する。 - [背景](/hc/documentation/learn-dxpr-builder/design/backgrounds)：アニメーション付きセクションに色・写真・グラデーションを付ける。 - [カルーセルレイアウト](/hc/documentation/learn-dxpr-builder/layout/carousel-layout)：スライドが開くたびに**On trigger**エフェクトを再生する。