Divi의 스크롤 효과로 애니메이션 시계를 디자인하는 방법
게시 됨: 2020-07-20웹은 시간과 관련된 디자인 액센트(속도 최적화, 예정된 이벤트 등)가 필요한 사이트로 가득합니다. 대부분의 경우 시계 아이콘이나 그래픽이 잘 작동할 수 있습니다. 그러나 애니메이션 시계 디자인을 만들면 웹사이트 디자인에 고유한 "회전"이 확실히 주어집니다.
Divi에서 사용할 수 있는 모든 내장 디자인 옵션을 사용하여 처음부터 멋진 애니메이션 시계 디자인을 만들 수 있습니다. 이 튜토리얼에서는 사용자가 페이지를 아래로 스크롤할 때 시계 바늘을 돌리는 애니메이션 시계를 만들 것입니다.
시작하자!
엿보기
다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다.
애니메이션 시계 레이아웃을 무료로 다운로드하십시오
이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
무료로 다운로드
Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
섹션 레이아웃을 Divi 라이브러리로 가져오려면 Divi 라이브러리로 이동하십시오.
가져오기 버튼을 클릭합니다.
이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.
그런 다음 가져오기 버튼을 클릭합니다.
완료되면 섹션 레이아웃을 Divi Builder에서 사용할 수 있습니다.
튜토리얼로 들어가 볼까요?
시작하는 데 필요한 것
시작하려면 다음을 수행해야 합니다.
- 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
- WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
- "처음부터 빌드" 옵션을 선택합니다.
그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.
1부: 시계 페이스 디자인하기
시작하려면 일반 섹션에 1열 행을 추가하십시오.
행 설정
모듈을 추가하기 전에 행 설정을 열고 다음을 업데이트하십시오.
- 배경색: #003a5c
디자인 탭에서 다음을 업데이트합니다.
- 거터 폭: 1
- 폭: 50vw
- 최대 너비: 500px
- 높이: 50vw
- 최대 높이: 500px
- 둥근 모서리: 50%
- 테두리 너비: 15px
- 테두리 색상: #ffffff
- 박스 섀도우: 스크린샷 참조
- 상자 그림자 수직 위치: 0px
- 상자 그림자 흐림 강도: 68px
- 그림자 색상: rgba(0,0,0,0.22)
고급 탭에서 다음과 같이 가시성 옵션을 업데이트합니다.
- 수평 오버플로: 숨김
- 수직 오버플로: 숨김
파트 2: 시간 마커 추가하기
행이 시계판으로 디자인되면 12시 0시, 3시 0시, 6시 0시 및 9시 0시를 나타내는 시간 마커를 추가할 준비가 되었습니다. 각 마커는 구분선 모듈을 사용하여 생성됩니다.
12시 마커
행 내부에 새 분할기 모듈을 추가하여 시작합니다.
그런 다음 배경색을 다음과 같이 업데이트합니다.
- 배경색: #78acf4
- 폭: 10vw
- 최대 너비: 150px
- 높이: 3px
- 둥근 모서리 : 8px
- 변환 Z축 회전: 90deg
고급 탭에서 구분선에 절대 위치를 지정합니다.
- 위치: 절대
- 위치: 상단 중앙
6시 마커
3시 마커를 만들려면 12시 마커를 만드는 데 사용된 구분선을 복제합니다. (이 시점에서 레이어 모달 내에서 모듈에 레이블을 지정하는 것이 좋습니다.) 그런 다음 복제 구분선을 열고 다음과 같이 위치 위치를 업데이트합니다.
- 위치: 하단 중앙
3시 마커
3시 마커를 생성하려면 6시 마커를 복제하십시오. 그런 다음 새 복제본에 대한 설정을 열고("3시"라는 레이블을 지정해야 함) 다음을 변경합니다.
- 위치: 오른쪽 중앙
그런 다음 다음과 같이 변환 옵션을 업데이트합니다.
번역 탭에서…
- 변환 X축 변환: 50%
회전 탭에서
- 변환 Z축 회전: 0deg
9시 마커
3시 마커를 생성하려면 6시 마커를 복제하십시오. 그런 다음 새 복제본에 대한 설정을 열고("9시 방향"으로 레이블을 지정해야 함) 다음을 변경합니다.
- 위치: 왼쪽 중앙
그런 다음 다음과 같이 변환 옵션을 업데이트합니다.
번역 탭에서…
- 변환 X 축 변환: -50%
3부: 시계 바늘 만들기(초, 분, 시)
시간 표시가 있으면 시계 바늘을 만들 준비가 됩니다. 초침부터 시작하겠습니다.
초침
초침을 만들려면 12시 방향 구분선을 복제하고 레이어 모달을 사용하여 열의 나머지 구분선 아래로 끕니다.
그런 다음 새 복제본에 "초"라는 레이블을 지정합니다.
모듈 설정을 열고 고급 탭에서 위치를 업데이트합니다.
- 위치: 센터 센터
디자인 탭에서 다음과 같이 크기를 업데이트합니다.
- 폭: 20vw
- 최대 너비: 200px
- 높이: 0.5vw
- 최대 높이: 7.5px
이제 초침이 시계판의 중앙에 있지만 일반 시계 바늘처럼 초침의 아래쪽이 중앙에서 시작하기를 원합니다. 그런 다음 바늘이 실제 시계에서처럼 회전할 수 있도록 바늘의 바닥이 중심에 피벗하는 원점으로 남아 있기를 원합니다. 이렇게 하려면 변환 옵션의 조합을 사용하여 특정 변환 원점에서 구분선을 배치하고 회전해야 합니다.
다음을 업데이트합니다.
번역 탭에서…
- Transform Translate X Axis: 0% (이것은 중요한 단계입니다)
회전 탭에서…
- 변환 Z 축 회전: -90deg
Origin 탭에서…
- 변환 원점: 왼쪽 중앙
스크롤 효과를 추가하면 이 손이 매우 빠르게 움직이므로 너무 산만하지 않도록 반투명 배경색을 지정해 보겠습니다.
- 배경색: rgba(175,175,175,0.12)
분침
분침을 생성하려면 초침 모듈을 복제하고 복제된 "분"에 레이블을 지정합니다. 그런 다음 새 구분선 모듈을 열고 배경색을 업데이트합니다.
- 배경 그라데이션 왼쪽 색상: #78acf4
- 배경 그라디언트 오른쪽 색상: #b0b9ff
- 기울기 방향: 90deg
그런 다음 다음과 같이 디자인을 업데이트합니다.
- 폭: 15w
- 최대 너비: 150px
- 높이: 1vw
- 최대 높이: 15px
시침
분침이 완성되면 초침 모듈을 복제하고 복제된 "시간"에 레이블을 지정합니다. 그런 다음 새 구분선 모듈을 열고 다음과 같이 배경색을 업데이트합니다.
- 배경색: #ffffff
그런 다음 디자인 탭에서 다음과 같이 크기를 업데이트합니다.
- 폭: 10vw
- 최대 너비: 100px
이 시점에서 스크롤 효과를 사용할 세 개의 시계 바늘이 모두 준비됩니다!
파트 4: 각 시계 바늘에 회전 스크롤 효과 추가하기
시계 바늘을 회전하기 위해 세 개의 시계 바늘 각각에 회전 스크롤 효과를 추가합니다. 우리는 시계 디자인으로 작업하고 있기 때문에 각 시계 바늘의 회전 각도를 사용하여 실제 시간을 나타낼 수 있음을 기억하는 것이 중요합니다. 예를 들어, 시침을 30도 돌리면 1시가 되고 60도는 2시가 되는 식입니다.
시침 회전 스크롤 이펙트
먼저 시침에 회전 스크롤 효과를 추가합니다. 시침 구분선 설정을 열고 다음 변환 효과를 추가합니다.
회전 탭에서…
- 회전 활성화: 예
- 시작 회전: 0deg(10%에서)
- 중간 회전: 15deg(50%에서)
- 끝 회전: 30deg(90%에서)
분침 회전 스크롤 효과
다음으로 분침에 회전 스크롤 효과를 추가합니다. 분침 구분선 설정을 열고 다음 변환 효과를 추가합니다.
회전 탭에서…
- 회전 활성화: 예
- 시작 회전: 0deg(10%에서)
- 중간 회전: 180deg(50%에서)
- 끝 회전: 360deg(90%에서)
초침 회전 스크롤 이펙트
다음으로 초침에 회전 스크롤 효과를 추가합니다. 초침 디바이더 설정을 열고 다음 변환 효과를 추가합니다.
회전 탭에서…
- 회전 활성화: 예
- 시작 회전: 0deg(10%에서)
- 중간 회전: 5400deg(50%에서)
- 끝 회전: 10800deg(90%에서)
참고: 초침이 1시간에 도달하는 정확한 회전은 21600도 회전이 필요합니다. 하지만 너무 빠르기 때문에 반으로 줄이는 것이 가장 좋다고 생각했습니다. 결국 이것은 디자인 목적을 위한 것입니다.
최종 결과
다음은 최종 디자인입니다.
그리고 이것은 스크롤 효과의 최종 결과입니다. 페이지를 아래로 스크롤할 때 시간이 정확히 1시간 경과하는 것을 확인하십시오.
마지막 생각들
시간을 그렇게 정확하게 표현하는 스크롤 효과로 이런 시계 디자인을 만들 수 있다는 것이 꽤 놀랍습니다. 스크롤하는 동안 시계의 시간을 늘리거나 줄이기 위해 더 많은 회전 스크롤 효과를 자유롭게 실험해 보십시오. 또한 이 시계 디자인을 사용하여 많은 CTA 또는 헤더를 강조할 수 있습니다.
댓글로 여러분의 의견을 기다리겠습니다.
건배!