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프레임워크와 함께 사용한다면 충돌을 피할 수 없다는 부분이 다소 아쉬움으로 남는다.
'라이브러리 창고 > 레이아웃 · 내비게이션 메뉴 · 버튼' 카테고리의 다른 글
| 「vertex」 3d 아이콘 (0) | 2022.06.03 |
|---|---|
| 「Sharer.js」SNS 공유버튼 JS라이브러리 (0) | 2022.02.01 |
| 『Cheetah Grid.js』매력적인 테이블 JS라이브러리 (0) | 2021.04.28 |
| 『GoldenLayout.js』pc용 s/w 스타일, GUI 라이브러리 (0) | 2021.03.23 |
| 『SortableJS』반응형 테이블메뉴 만들기 (0) | 2021.03.19 |
댓글