비주얼섹션 스크롤 다운 애니메이션 알림 아이콘 만들기 (코드, 고급)

브라우저 화면을 꽉 채우는 비주얼섹션에 움직이는 애니메이션 아이콘을 추가하여, 방문자로 하여금 페이지 하단에 추가 콘텐츠가 있음을 알릴 수 있습니다. 이 튜토리얼에서는 코드를 사용해 애니메이션 스크롤 다운 아이콘을 제작하는 방법을 소개합니다.

앞서 완료해야 할 사항

이 튜토리얼을 진행하려면, 스크롤 다운 알림 아이콘으로 사용할 이미지가 필요합니다. 웹디자인에 사용할 커스텀 이미지는 게시판을 활용할 수 있습니다. 게시판에 커스텀 디자인 아이콘을 올리고, 해당 아이콘의 이미지 주소를 획득하는 방법은 아래 도움말을 참고해 주세요.

게시판을 파일 자료실로 활용하기

1단계: 비주얼 섹션 추가하기

비주얼섹션을 추가하고 꾸며줍니다.

1. 디자인 모드에 접속합니다. 
2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭하고, 비주얼섹션을 추가할 메뉴로 이동하거나, 새로 생성합니다.
3. 왼쪽 상단 위젯 추가 ＋ 아이콘을 클릭합니다.
4. 비주얼섹션을 클릭하고, 비주얼섹션을 꾸며줍니다. 비주얼섹션 활용방법

   

2단계: 빈 섹션 추가하기 및 섹션 ID 복사하기

비주얼섹션 바로 아래 새로운 빈 섹션을 추가합니다.

1. 비주얼섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
2. 컨텍스트 메뉴가 나오면 빈 섹션추가를 클릭합니다.
3. 추가한 섹션의 섹션ID 값을 확인 후 복사합니다. 섹션ID 확인방법
   참고: 섹션ID는 아래 4단계에서 아이콘 클릭 시 이동할 링크 삽입에 사용됩니다.

3단계: 스크롤 다운 알림 아이콘 코드 삽입하기

1. 빈 섹션의 정중앙에 위치한 위젯 추가 ＋ 아이콘을 클릭합니다.
2. 코드 위젯을 클릭합니다.
3. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
4. 컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다.
5. 아래의 코드를 복사합니다.

   <style>
   .buttonPosition {
       position: relative;
       text-align: center;
       z-index: 99;
       animation-name: scrlDwnIndc;
       animation-duration: 1s;
       animation-iteration-count: infinite;
   }
   @keyframes scrlDwnIndc {
     0%    {bottom: 80px;}
     20%   {bottom: 84px;}
     40%   {bottom: 88px;}
     60%   {bottom: 92px;}
     80%   {bottom: 94px;}
     100%  {bottom: 84px;}
   }
   </style>
   
   
   <div class="buttonPosition">
     <a href="/메뉴URL#섹션ID">
       <img src="이미지주소" width="가로크기" height="">
     </a>
   </div>
   

6. 위에서 복사한 코드를 코드 설정 빈 칸에 붙여넣습니다.

4단계: 내 사이트에 맞춰 코드 수정하기

다음 도움말을 참조하여, 붙여넣은 코드를 내 사이트에 맞게 수정합니다.

1. 아이콘 이동속도 조절하기

아이콘은 위, 아래로 움직이도록 제작되었습니다. animation-duration 속성을 변경해, 아이콘의 상하 이동속도를 조절할 수 있습니다.

• 이 코드는 아이콘이 1회 이동하는 데 소요되는 시간이 1초(1s)로 지정되어 있습니다.
• 더 빠르게, 또는 느리게 설정하려는 경우 animation-duration 속성을 초(s) 단위로 변경해 주세요.

2. 아이콘 이동경로 지정하기

아이콘은 프레임 단위로 움직입니다. @keyframe scrlDwnIndc 항목에서 % 단위로 이동할 위치를 픽셀(px) 단위로 지정해 주세요.

• 0%는 아이콘 이동 시작점을 가리키며, 100%는 끝나는 종료점을 가리킵니다. 삽입하신 비주얼섹션의 높이에 따라 숫자를 변경합니다.
• 의도하지 않은 이상 자연스러운 반복 애니메이션을 위해 시작점(0%)과 종료점(100%)은 같은 값으로 지정하실 것을 권장드립니다.
• 남은 프레임 구간은 자유롭게 지정해 주세요.

3. (선택 사항) 아이콘 클릭 시 이동할 섹션ID 추가하기

아이콘 클릭 시 비주얼섹션 바로 아래 위치한 섹션으로 이동하도록 섹션 링크(앵커)를 삽입할 수 있습니다.

1. href 속성에 /메뉴URL#섹션ID를 삭제합니다.
2. /를 입력하고, 현재 메뉴URL을 입력합니다. 이후 띄어쓰기 없이, 위 2단계에서 복사한 섹션ID 값을 붙여넣습니다. 메뉴URL 확인방법

   

3. 섹션 링크 입력을 완료하면 다음처럼 코드가 입력됩니다.
   참고: 아래 주소는 예시입니다. 메뉴URL 및 섹션ID는 작업 중인 사이트마다 다릅니다.

   

4. 아이콘 이미지 주소 입력하기

코드에 작성된 이미지주소를 삭제하고, 삽입할 이미지 주소를 입력합니다.

5. (선택 사항) 아이콘 크기 조절하기

삽입한 아이콘의 크기를 조절할 수 있습니다. 가로크기를 삭제하고, 원하는 크기를 픽셀(px) 단위로 입력합니다. 가로 크기만 입력하면, 세로 크기는 이미지 비율에 따라 자동으로 조절됩니다.

6. 코드 저장하기

수정을 완료하면 코드 설정 창 오른쪽 하단의 저장 버튼을 클릭해 적용합니다.

5단계: 미리보기 및 게시하기

1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
2. 스크롤 다운 알림 아이콘이 정상적으로 동작하는지 확인합니다.
3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.