ホバーでエレメントを反応させる.
訪問者が指したらエレメントを変化させます。持ち上がるボックス、濃くなるボタン、明るくなる画像です。通常の見た目はStyleパネルで、ホバー時の見た目は対となるHover styleパネルで設定します。例ではホバーで持ち上がるグレーのテキストボックスを作ります。
動画ではテキストボックスに背景、パディング、ホバーで深まるシャドウを付けています。
テキストボックスを作る
- コンテンツエリアの+をクリックし、LayoutタブからSectionを選びます。
- セクションの+をクリックしてRowを選びます。
- ローのグリッドアイコンをクリックし、3等分カラムのタイルを選んでSaveをクリックします。
- 最初のカラムの+をクリックし、ContentタブからTextを選びます。
- "Open day"と入力し、Heading 3に設定してその下に1行を追加します。
通常時のスタイルを設定する
- 同じ設定ダイアログでStyleパネルを開きます。
- ライトグレーのBackgroundを選びます。
- ボックスモデルでPaddingの上・左・下辺を24に設定します。
- 設定するのはBorder radiusで、8にします。
- 設定するのはDrop shadowで、1にします。
ホバー時のスタイルを設定する
- 開くのはHover styleパネルです。
- 設定するのはDrop shadowで、4にします。
- クリックするのはSaveです。
- DXPR BuilderツールバーのSaveをクリックします。
- ビューメニュー(ツールバーの目のアイコン)を開き、Previewを選びます。
- ポインターをテキストボックスの上に移動します。
表示内容
通常時、テキストボックスはグレーで角が丸く、軽いシャドウ付きです。ポインターが届くとシャドウが深まり、ボックスが持ち上がったように見えます。ポインターが離れると元に戻ります。シャドウの変化はアニメーションします。新しい色などの他のホバー変更は即時に切り替わります。
設定
ホバー時の見た目はHover styleパネルで設定し、Styleパネルと同じフィールドを持ちます。空のフィールドは通常時の値を保ちます。
| フィールド | ホバー時の用途 |
|---|---|
| Margin、Border、Padding(ボックスモデル) | エレメントを移動・枠付け・拡大します |
| Font color | テキストを強調します |
| Border color | 枠線を強調します |
| Background | 塗りを変更します |
| Background image、Background style、Background position | 画像を差し替え・移動します |
| Border style | 枠線を表示します |
| Font size | テキストを拡大します |
| Border radius | 角を丸めます |
| Opacity | エレメントを表示・減光します |
| Drop shadow | 奥行きを追加します。1〜5 |
よくあるパターン
- Card lift：Drop shadowはStyleでは1に、Hover styleでは4に。
- Picture reveal：OpacityはStyleでは0.7に、Hover styleでは1に。
- Button colour change：濃いBackgroundをHover styleで。
- Border highlight：Border style Solid、StyleではライトなBorder color、Hover styleではアクセントのBorder color。
効果が表示されない場合
- 指してもテキストボックスが変わりません。ホバー値が通常値と同じか、Styleパネルに誤って設定しています。More > Settingsを開き、Hover styleパネルでDrop shadowを上げます。
- 編集中は効果を判断しにくいです。編集モードではエレメントを指すとコントロールバーとアウトラインも表示されます。ビューメニューでPreviewを選んで再度指します。
- Opacity、Font size、Border radiusの0は効果がありません。0の値はこの3フィールドでは未設定扱いです。エレメントをほぼ完全にフェードさせるにはOpacityに0.01を使います。
次のステップ
- スクロール表示でエレメントに動きを付ける：ホバーを超えた動きを追加する。
- カードをスタイルする：ホバーとカードの色・シャドウを組み合わせる。