호버에 반응하게 만들기.
방문자가 가리키면 요소가 변하게 합니다. 떠오르는 상자, 어두워지는 버튼, 밝아지는 사진이 그 예입니다. 평소 모습은 Style 패널에서, 호버 모습은 쌍둥이인 Hover style 패널에서 정합니다. 예제에서는 호버 시 떠오르는 회색 텍스트 상자를 만듭니다.
동영상에서는 텍스트 상자에 배경, 안쪽 여백, 그림자를 주고 호버 시 그림자를 깊게 합니다.
텍스트 상자 만들기
- 콘텐츠 영역에서 +를 클릭하고 Section을 Layout 탭에서 고릅니다.
- 섹션에서 +를 클릭하고 Row를 고릅니다.
- 로우의 격자 아이콘을 클릭하고 동일한 컬럼 세 개 타일을 고른 뒤 Save를 클릭합니다.
- 첫 번째 컬럼에서 +를 클릭하고 Text를 Content 탭에서 고릅니다.
- "Open day"를 입력하고 Heading 3으로 설정한 뒤 아래에 한 줄을 추가합니다.
평소 스타일 정하기
- 동일한 설정 대화상자에서 Style 패널을 엽니다.
- 연회색 Background를 고릅니다.
- 박스 모델에서 Padding의 위, 왼쪽, 아래를 24로 설정합니다.
- 값을 Border radius에 8로 설정합니다.
- 값을 Drop shadow에 1로 설정합니다.
호버 스타일 정하기
- 설정의 Hover style 패널을 엽니다.
- 값을 Drop shadow에 4로 설정합니다.
- 버튼 Save를 클릭합니다.
- DXPR Builder 도구 모음에서 Save를 클릭합니다.
- 도구 모음의 눈 아이콘인 보기 메뉴를 열고 Preview를 선택합니다.
- 포인터를 텍스트 상자로 이동합니다.
표시 내용
평소 텍스트 상자는 둥근 모서리와 옅은 그림자의 회색입니다. 포인터가 닿으면 그림자가 깊어지고 상자가 떠오르는 듯합니다. 포인터가 떠나면 원래대로 돌아갑니다. 그림자 변화는 애니메이션으로 나타납니다. 새 색상 같은 다른 호버 변화는 즉시 바뀝니다.
설정
패널 Hover style에는 Style 패널과 동일한 필드가 있습니다. 비워 둔 필드는 평소 값을 유지합니다.
| Field | Use on hover |
|---|---|
| Margin, Border, Padding (box model) | 요소를 이동하거나 테두리를 두르거나 키웁니다. |
| 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 1은 Style에서, 4는 Hover style에서 지정합니다.
- Picture reveal: Opacity 0.7은 Style에서, 1은 Hover style에서 지정합니다.
- Button colour change: 더 어두운 Background를 Hover style에서 씁니다.
- Border highlight: Border style Solid와 밝은 Border color를 Style에서 쓰고, Hover style에는 강조 Border color를 씁니다.
효과가 보이지 않는 경우
- 가리켜도 텍스트 상자가 바뀌지 않습니다. 호버 값과 평소 값이 같거나 Style 패널에 잘못 설정했습니다. More > Settings를 열고 Drop shadow를 Hover style 패널에서 높입니다.
- 편집 중에는 효과를 판단하기 어렵습니다. 편집 모드에서는 가리키면 요소에 컨트롤 표시줄과 외곽선도 표시됩니다. 보기 메뉴에서 Preview를 선택하고 다시 가리켜 봅니다.
- Opacity, Font size, Border radius를 0으로 설정하면 효과가 없습니다. 이 세 필드에서 0은 설정하지 않은 것으로 취급합니다. 요소를 거의 완전히 흐리게 하려면 Opacity를 0.01로 지정합니다.
다음 단계
- Animate elements as they scroll into view에서 호버를 넘어 움직임을 추가합니다.
- Style your cards에서 호버와 카드 색상, 그림자를 조합합니다.