라이브러리 창고/레이아웃 · 내비게이션 메뉴 · 버튼
「SHEPHERD.js」 팝업 이동 내비게이션
Recstasy
2022. 1. 29. 07:30
Example css Selector 1
SHEPHERD.js는 팝업창을 통해 특정위치로 이동할 수 있는 JS라이브러리다.
Shepherd — Guide your users through a tour of your app.
01. How to Include 02. Example const tour = new Shepherd.Tour({ defaultStepOptions: { cancelIcon: { enabled: true }, classes: 'class-1 class-2', scrollTo: { behavior: 'smooth', block: 'center' } } }); tour.addStep({ title: 'Creating a Shepherd Tour', text:
shepherdjs.dev
SHEOHERD.js에서는 팝업창을 닫지 않을 경우에 계속 "팝업 - 팝업 -팝업" 방식으로 단일 페이지를 탐색할 수 있다. 웹사이트의 특정 기능을 소개하거나 순서에 맞게 전달해야하는 교육용 사이트에서 활용이 가능하다. 가령, 아래와 같이 'Next'버튼에 콜벡 함수 이벤트 함수를 설정함으로써 팝업에서 팝업을 오가는 것이 가능하다.
CSS설정을 임의로 할 수 있는 부분에서 자유도를 확보했지만 css프레임워크와 함께 사용한다면 충돌을 피할 수 없다는 부분이 다소 아쉬움으로 남는다.