Divi 사이트의 영웅 섹션에 대한 4개의 애니메이션 스크롤 버튼(및 생성 방법)
게시 됨: 2019-08-08애니메이션 스크롤 버튼은 사용자의 관심을 끌고 웹 페이지로 안내하는 단순하지만 중요한 역할을 합니다. 이러한 유형의 버튼은 일반적으로 스크롤 없이 볼 수 있는 부분 위에 있으므로 방문자가 웹 페이지의 다음 중요한 섹션으로 스크롤하지 않고도 버튼을 클릭할 수 있습니다. 실제로 Divi에는 전체 너비 헤더 모듈에 이 스크롤 버튼 기능이 내장되어 있습니다.
이 튜토리얼에서는 Divi에서 완전히 사용자 정의된 애니메이션 스크롤 버튼을 만드는 방법을 보여 드리겠습니다. 따라서 전체 너비 헤더 모듈에서 Divi의 내장 스크롤 버튼에 대한 창의적인 대안을 찾고 있다면 이 애니메이션 스크롤 버튼 디자인이 올바른 방향(말 그대로)으로 안내하는 데 도움이 될 것입니다.
엿보기
다음은 함께 구축할 디자인을 간략히 살펴보겠습니다.
애니메이션 스크롤 버튼 레이아웃을 무료로 다운로드하십시오
이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
무료로 다운로드
Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
YouTube 채널 구독
레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 json 파일을 Divi Builder로 드래그하기만 하면 됩니다.
튜토리얼로 들어가 볼까요?
시작하는 데 필요한 것
시작하려면 다음이 필요합니다.
- Divi 테마가 설치되고 활성화되었습니다.
- 프론트 엔드에서 처음부터 빌드하기 위해 생성된 새 페이지(비주얼 빌더)
- 모의 콘텐츠에 사용할 이미지
그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.
헤더 섹션 만들기
애니메이션 스크롤 버튼 디자인을 시작하기 전에 모의 헤더 섹션을 설정해야 합니다. 애니메이션 스크롤 버튼 디자인을 얻는 데 더 집중할 것이므로 어두운 배경으로 헤더 디자인을 단순하게 유지할 것입니다. 완료되면 섹션을 복제하여 각각의 새로운 스크롤 버튼 디자인을 처리할 수 있습니다.
시작하려면 한 열 행이 있는 일반 섹션을 만듭니다.
그런 다음 모듈을 추가하기 전에 섹션 설정을 열고 다음과 같이 어두운 배경을 추가합니다.
배경색: #222222
모든 어두운 배경이 작동합니다.
헤더 텍스트 추가
모의 헤더 텍스트를 생성하려면 한 열 행에 새 텍스트 모듈을 추가합니다.
그런 다음 기본 단락 텍스트 바로 위의 h1 헤더로 본문 내용을 업데이트합니다.
<h1>scroll button animation</h1> <p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
그런 다음 디자인 설정을 다음과 같이 업데이트합니다.
텍스트 글꼴: Karla
텍스트 텍스트 정렬: 가운데
제목 텍스트 크기: 5vw
텍스트 색상: 라이트
이것은 다른 애니메이션 스크롤 버튼에 사용할 기본 섹션 디자인입니다.
애니메이션 스크롤 버튼 디자인 #1: 느린 바운스가 있는 세로 텍스트 애니메이션
기본 섹션 디자인이 준비되면 첫 번째 애니메이션 스크롤 버튼을 추가할 준비가 되었습니다. 이 스크롤 버튼은 오른쪽에 아이콘이 있는 블러브 모듈로 구성됩니다. 그런 다음 화살표 아이콘이 아래를 가리키도록 텍스트와 아이콘이 수직으로 회전합니다. 그 후 느린 지속 시간으로 바운스 애니메이션을 추가합니다.
방법은 다음과 같습니다.
먼저 헤더 텍스트가 포함된 행 바로 아래에 새로운 1열 행을 추가합니다.
그런 다음 행에 블러브 모듈을 추가합니다.
광고 설정에서 기본 본문 내용을 삭제하고 다음을 추가합니다.
제목: 스크롤
아이콘 사용: 예
아이콘: 오른쪽 화살표(스크린샷 참조)
그런 다음 디자인 설정을 다음과 같이 업데이트합니다.
아이콘 색상: #ffffff
이미지/아이콘 배치: 왼쪽
아이콘 글꼴 크기 사용: 예
아이콘 글꼴 크기: 50px
제목 글꼴 스타일: TT
제목 텍스트 색상: #ffffff
제목 텍스트 크기: 14px
제목 글자 간격: 3px
제목 줄 높이: 50px(아이콘 글꼴 크기와 동일)
다음으로, 블러브에 설정된 너비를 지정하고 다음과 같이 수직으로 회전해야 합니다.
너비: 132px
모듈 정렬: 중앙
변환 Z축 회전: 90deg
이제 우리가 해야 할 일은 광고의 내용 순서를 반대로 하여 화살표 아이콘이 광고의 왼쪽이 아닌 오른쪽에 오도록 하는 것입니다. 이렇게 하면 화살표가 의도한 대로 세로 텍스트 아래에 표시됩니다. 이렇게 하려면 기본 요소에 다음 사용자 정의 CSS를 추가해야 합니다.
direction: rtl;
슬로우 펄스 애니메이션 추가
애니메이션을 추가하려면 다음을 업데이트하세요.
애니메이션 스타일: 바운스
애니메이션 방향: 아래로
애니메이션 지속 시간: 5000ms
애니메이션 지연: 400ms
이미지/아이콘 애니메이션: 왼쪽에서 오른쪽으로
최종 결과
이제 디자인 #1의 최종 결과를 확인해 보겠습니다.
애니메이션 스크롤 버튼 디자인 #2: 수직 선택 윤곽 텍스트 애니메이션
이 다음 디자인은 블러브 모듈을 사용하여 만든 세로 텍스트 스크롤 버튼을 유지한다는 점에서 디자인 #1을 기반으로 합니다. 차이점은 애니메이션입니다. 이 디자인을 위해 스크롤 버튼이 행 컨테이너 위에 숨겨져 있는 것으로 시작하여 행 아래에 숨겨져 있는 버튼으로 끝나는 슬라이드 애니메이션을 추가할 것입니다. 애니메이션이 반복되면 사용자의 시선을 사로잡는 텍스트 선택 윤곽 애니메이션 효과가 생성됩니다.
방법은 다음과 같습니다.
먼저 디자인 #1의 전체 섹션을 복제합니다.
행 2 설정 업데이트
다음으로, 블러브 모듈/스크롤 버튼이 포함된 섹션 행을 다음과 같이 업데이트합니다.
수평 오버플로: 숨김
수직 오버플로: 숨김
Blurb 모듈 설정 업데이트
선택 윤곽 애니메이션을 생성하려면 먼저 변환 변환을 사용하여 행 컨테이너 아래(보기에서 숨겨짐) 아래의 문구 텍스트를 이동해야 합니다. 이것은 애니메이션이 끝날 때 텍스트가 위치할 위치입니다. 다음을 업데이트합니다.
변환 Y축 변환: 115px
다음으로 다음 애니메이션 설정을 추가합니다.
애니메이션 스타일: 슬라이드
애니메이션 방향: 아래로
애니메이션 시간: 4000ms
애니메이션 강도: 195%
애니메이션 시작 불투명도: 100%
애니메이션 속도 곡선: 선형
애니메이션 반복: 루프
최종 결과
이제 디자인 #3의 최종 결과를 확인해 보겠습니다.
애니메이션 스크롤 버튼 디자인 #3: 지연된 슬라이드 다운 애니메이션이 있는 화살표 탭
이 다음 디자인에서는 텍스트 모듈과 안내문 모듈을 결합하여 독특한 화살표 탭 디자인을 만들 것입니다.
이 디자인의 경우 기본 헤더 섹션 디자인으로 시작합니다. 따라서 중복된 디자인 #3 섹션을 복제한 다음 행 2에서 블러 모듈을 삭제할 수 있습니다.
그런 다음 첫 번째 행 바로 아래의 한 열 행에 텍스트 모듈을 추가합니다.
그런 다음 "scroll"이라는 단어로 본문 내용을 업데이트합니다.
그런 다음 디자인 설정을 다음과 같이 업데이트합니다.
배경색: #ffffff
텍스트 텍스트 색상: #222222
텍스트 정렬: 가운데
너비: 50px
모듈 정렬: 중앙
여백: 0px 하단
패딩: 상단 20px, 하단 20px
둥근 모서리 왼쪽 아래 5px, 오른쪽 아래 5px
광고 아이콘 추가
이제 텍스트 모듈이 배치되었으므로 화살표 탭 디자인을 완료하기 위해 바로 아래에 광고 아이콘을 만들어야 합니다. 이렇게 하려면 텍스트 모듈 아래에 새 블러브 모듈을 추가하십시오.
그런 다음 기본 제목과 본문을 삭제합니다. 그런 다음 다음 업데이트를 추가합니다.
아이콘 사용: 예
아이콘: 아래쪽 화살표 삼각형(스크린샷 참조)
그런 다음 다음과 같이 설정을 업데이트합니다.
아이콘 색상: #ffffff
여백: -36px 상단, 0px 하단
이 음수 여백은 화살표 탭 디자인을 위해 텍스트 모듈에 화살표를 첨부합니다.
그런 다음 광고 이미지에 다음 CSS를 추가하여 아이콘 아래의 불필요한 여백을 제거합니다.
광고 이미지 CSS:
margin-bottom: 0px;
행 2 설정 및 애니메이션
스크롤 버튼 디자인을 구성하는 두 모듈에 동일한 애니메이션을 추가하고 싶기 때문에 애니메이션을 포함하는 행에 애니메이션을 추가해야 합니다. 다음과 같이 행에 대한 설정을 업데이트합니다.
최대 너비: 100px
패딩: 0px 상단, 0px 하단
애니메이션 스타일: 슬라이드
애니메이션 방향: 아래로
애니메이션 지속 시간: 1200ms
행 1 배경색 및 상자 그림자
이 디자인의 마지막 터치는 스크롤 버튼 행 바로 위의 첫 번째 행에 배경색을 추가하는 것입니다. 그리고 해당 행의 Z 인덱스를 업데이트하여 스크롤 버튼 애니메이션이 헤더를 뚫고 나오는 것처럼 표시되도록 할 것입니다.
다음과 같이 행 1에 대한 설정을 엽니다.
배경색: #222222
Z-인덱스: 10
박스 섀도우: 스크린샷 참조
상자 그림자 수직 위치: 80px
상자 그림자 흐림 강도: 22px
상자 그림자 확산 강도: -70px
그림자 색상: #222222(배경색과 일치하는지 확인)
최종 결과
이제 최종 결과를 확인하십시오.
애니메이션 스크롤 버튼 디자인 #4: 마우스 스크롤 애니메이션
이 마지막 애니메이션 스크롤 버튼에 대해 텍스트 모듈과 블러브 모듈을 결합하여 마우스 스크롤 애니메이션을 만들 것입니다.
방법은 다음과 같습니다.
시작하려면 기본 헤더 섹션을 사용할 수 있습니다. 그런 다음 행 1 아래에 새 행을 추가하십시오.
Blurb 모듈 추가
다음으로, 행에 블러브 모듈을 추가합니다. 그런 다음 기본 제목과 본문을 삭제합니다.
그런 다음 아이콘을 다음과 같이 업데이트합니다.
아이콘 사용: 예
아이콘: 원(스크린샷 참조)
그런 다음 다음과 같이 광고 문구 디자인 설정을 업데이트합니다.
아이콘 색상: #ffffff
아이콘 글꼴 크기 사용: 예
아이콘 글꼴 크기: 15px
애니메이션 스타일: 슬라이드
애니메이션 방향: 아래로
애니메이션 지속 시간: 1200ms
애니메이션 반복: 루프
이미지/아이콘 애니메이션: 애니메이션 없음
그런 다음 Blurb 이미지에 다음 사용자 지정 CSS를 추가합니다.
margin-bottom: 0px;
텍스트 모듈 추가
다음으로, blurb 모듈 바로 아래에 새 텍스트 모듈을 추가합니다. 그런 다음 "scroll"이라는 단어로 본문을 업데이트합니다.
그런 다음 다음 텍스트 설정을 업데이트합니다.
텍스트 텍스트 색상: #ffffff
텍스트 정렬: 가운데
너비: 90px
여백: 상단 10px, 왼쪽 -30px
행 2 설정 업데이트
이제 다음과 같이 행 설정을 업데이트합니다.
너비: 30px
높이: 60px
둥근 모서리: 16px
테두리 너비: 1px
테두리 색상: #ffffff
테두리 스타일: 단색
수평 오버플로: 표시
수직 오버플로: 표시
최종 결과
이제 최종 결과를 확인해 보겠습니다.
앵커 링크 기능 추가
앵커 링크는 페이지의 다른 섹션으로 이동하는 링크입니다. 한 페이지 웹사이트에서 자주 사용됩니다. 동일한 개념을 사용하여 스크롤 버튼에 앵커 링크를 추가하여 페이지 아래로 원하는 섹션으로 이동할 수 있습니다. 애니메이션 스크롤 버튼에 앵커 링크 기능을 추가하려면 두 가지 주요 작업을 수행해야 합니다.
- 이동하려는 섹션 또는 행에 CSS ID를 추가해야 합니다.
- 스크롤 버튼에 동일한 CSS ID의 앵커 링크를 추가해야 합니다.
이것이 작동하는 방법입니다. 먼저 스크롤 버튼이 포함된 헤더 섹션 아래에 새 섹션을 만듭니다. 그런 다음 고급 탭에서 새 섹션에 CSS ID를 지정합니다.
그런 다음 앵커 링크로 전환하려는 요소/스크롤 버튼을 찾아 해시태그(또는 파운드 기호)로 시작하고 바로 뒤에 점프하려는 요소의 CSS ID가 오는 URL을 추가합니다.
예를 들어 섹션의 CSS ID가 "section-2"인 경우 링크 URL로 "#section-2"를 추가합니다.
Divi를 사용하면 Divi의 모든 요소에 링크 URL을 추가할 수 있으므로 애니메이션 스크롤 버튼이 포함된 전체 행에 자유롭게 링크를 추가할 수 있습니다.
자세한 내용은 앵커 링크로 할 수 있는 몇 가지 멋진 작업을 확인하세요.
창의력을 발휘하세요!
다른 모듈을 결합하고 다른 방식으로 애니메이션하는 것을 두려워하지 마십시오. 사실 Divi로 스크롤 버튼을 디자인하는 새로운 방법을 모색하면서 모바일에서도 사용할 수 있는 재미있는 썸 스크롤 애니메이션을 만들었습니다. 확인하고 싶으신 분들을 위해 위의 무료 다운로드에 포함시켰습니다.
마지막 생각들
이와 같은 애니메이션 스크롤 버튼은 Divi로 쉽게 구축할 수 있습니다. 그리고 앵커 링크처럼 취급하면 헤더보다 더 많은 곳에서 사용할 수 있습니다. 이 디자인이 다음 프로젝트를 위한 새로운 스크롤 버튼을 만드는 데 영감을 주기를 바랍니다.
댓글로 여러분의 의견을 기다리겠습니다.
건배!