thumbnail

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

주의: 본 튜토리얼을 진행하려면 기초적인 HTML 및 CSS에 대한 이해가 필요합니다. 제공되는 도움말과 소스 코드 이외의 추가적인 기술지원은 제공하지 않습니다.

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

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

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

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

  1. 디자인 모드에 접속합니다. 

  2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭하고, 비주얼섹션을 추가할 메뉴로 이동하거나, 새로 생성합니다.

  3. 왼쪽 상단 위젯 추가 + 아이콘을 클릭합니다.

  4. 비주얼섹션을 클릭하고, 비주얼섹션을 꾸며줍니다. 비주얼섹션 활용방법

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

  1. 비주얼섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.

  2. 컨텍스트 메뉴가 나오면 빈 섹션추가를 클릭합니다.

  3. 추가한 섹션의 섹션ID 값을 확인 후 복사합니다. 섹션ID 확인방법참고: 섹션ID는 아래 4단계에서 아이콘 클릭 시 이동할 링크 삽입에 사용됩니다.

  1. 빈 섹션의 정중앙에 위치한 위젯 추가 + 아이콘을 클릭합니다.

  2. 코드 위젯을 클릭합니다.

  3. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.

  4. 컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다.

  5. 아래의 코드를 복사합니다

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

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

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

  • 이 코드는 아이콘이 1회 이동하는 데 소요되는 시간이 1초(1s)로 지정되어 있습니다.

  • 더 빠르게, 또는 느리게 설정하려는 경우 animation-duration 속성을 초(s) 단위로 변경해 주세요.

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

  • 0%는 아이콘 이동 시작점을 가리키며, 100%는 끝나는 종료점을 가리킵니다. 삽입하신 비주얼섹션의 높이에 따라 숫자를 변경합니다.

  • 의도하지 않은 이상 자연스러운 반복 애니메이션을 위해 시작점(0%)과 종료점(100%)은 같은 값으로 지정하실 것을 권장드립니다.

  • 남은 프레임 구간은 자유롭게 지정해 주세요.

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

참고: 만약 링크를 추가하지 않는 경우  따옴표("") 사이에  javascript:; 를 입력해 주세요. 링크가 작동하지 않게 됩니다.

  1. href 속성에 /메뉴URL#섹션ID를 삭제합니다.

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

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

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

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

참고: 이미지 크기를 있는 그대로 사용하려면  가로크기 한글만 삭제하고 빈 칸으로 두면 됩니다.

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

  1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.

  2. 스크롤 다운 알림 아이콘이 정상적으로 동작하는지 확인합니다.

  3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.