"광주 문화예술 인문스토리 플랫폼2"의 두 판 사이의 차이
광주문화예술인문스토리플랫폼
| 1,056번째 줄: | 1,056번째 줄: | ||
</script> | </script> | ||
<script src="https://cdn.jsdelivr.net/npm/keen-slider@6.8.5/keen-slider.min.js"></script> | <script src="https://cdn.jsdelivr.net/npm/keen-slider@6.8.5/keen-slider.min.js"></script> | ||
| − | + | <script> | |
| − | + | var animation = { | |
| − | + | duration: (document.querySelectorAll('.keen-slider__slide').length / 2) * 500, | |
| − | + | easing: t => t, | |
| − | + | }; | |
| − | + | ||
| − | + | // 변수 초기화 | |
| − | + | let slider = null; | |
| − | + | let slider2 = null; | |
| − | + | let autoplayActive = true; | |
| − | + | let autoplayTimeoutId = null; | |
| − | + | let isSyncingSlider1 = false; | |
| − | + | let isSyncingSlider2 = false; | |
| − | + | let isMouseOverContainer = false; // 컨테이너 마우스 상태 추적 변수 | |
| − | + | // 슬라이더 2 먼저 초기화 | |
| − | + | slider2 = new KeenSlider('#my-keen-slider2', { | |
| − | + | loop: true, | |
| − | + | renderMode: 'performance', | |
| − | + | mode: 'free', | |
| − | + | rtl: true, | |
| − | + | slides: { | |
| − | + | perView: 'auto', | |
| − | + | spacing: 8, | |
| − | + | }, | |
| − | + | breakpoints: { | |
| − | + | '(min-width: 500px)': { | |
| − | + | slides: { | |
| − | + | perView: 'auto', | |
| − | + | spacing: 28, | |
| − | + | }, | |
| − | + | }, | |
| − | + | }, | |
| − | + | created(s) { | |
| − | + | if (!isMouseOverContainer) { | |
| − | + | s.moveToIdx(5, true, animation); | |
| − | + | } | |
| − | + | }, | |
| − | + | animationEnded(s) { | |
| − | + | // if (!isMouseOverContainer) { | |
| − | + | slider2.endTimer = setTimeout(()=>{ | |
| − | + | slider?.moveToIdx(slider.track.details.abs + 4, true, animation); | |
| − | + | s.moveToIdx(s.track.details.abs + 5, true, animation); | |
| − | + | },1000) | |
| − | + | // } | |
| − | + | }, | |
| − | + | detailsChanged(s) { | |
| − | + | // 마우스가 컨테이너 위에 있을 때만 동기화 작동 | |
| − | + | if(slider2?.endTimer) clearTimeout(slider2?.endTimer); | |
| − | + | if (!isSyncingSlider1) { | |
| − | + | if(slider){ | |
| − | + | if(slider.track){ | |
| − | + | slider.animator.stop(); | |
| − | + | isSyncingSlider2 = true; | |
| − | + | // 위치 동기화 | |
| − | + | const position = s.track.details.position; | |
| − | + | slider.track.to(position); | |
| − | + | setTimeout(() => { | |
| − | + | isSyncingSlider2 = false; | |
| − | + | }, 30); | |
| − | + | } | |
| − | + | } | |
| − | + | } | |
| − | + | }, | |
| − | + | }); | |
| − | + | ||
| − | + | // slider1 초기화 | |
| − | + | slider = new KeenSlider('#my-keen-slider', { | |
| − | + | loop: true, | |
| − | + | renderMode: 'performance', | |
| − | + | mode: 'free', | |
| − | + | breakpoints: { | |
| − | + | '(min-width: 500px)': { | |
| − | + | slides: { | |
| − | + | perView: 'auto', | |
| − | + | spacing: 28, | |
| − | + | }, | |
| − | + | }, | |
| − | + | }, | |
| − | + | slides: { | |
| − | + | perView: 'auto', | |
| − | + | spacing: 8, | |
| − | + | }, | |
| − | + | created(s) { | |
| − | + | if (!isMouseOverContainer) { | |
| − | + | s.moveToIdx(5, true, animation); | |
| − | + | } | |
| − | + | }, | |
| − | + | animationEnded(s) { | |
| − | + | // if (!isMouseOverContainer) { | |
| − | + | slider.endTimer = setTimeout(()=>{ | |
| − | + | slider2?.moveToIdx(slider2.track.details.abs + 4, true, animation); | |
| − | + | s.moveToIdx(s.track.details.abs + 5, true, animation); | |
| − | + | },1000) | |
| − | + | // } | |
| − | + | }, | |
| − | + | detailsChanged(s) { | |
| − | + | if(slider?.endTimer) clearTimeout(slider?.endTimer); | |
| − | + | // 마우스가 컨테이너 위에 있을 때만 동기화 작동 | |
| − | + | if (!isSyncingSlider2 ) { | |
| − | + | if(slider2){ | |
| − | + | if(slider2.track){ | |
| − | + | slider2.animator.stop(); | |
| − | + | isSyncingSlider1 = true; | |
| − | + | slider2.track.to(s.track.details.position); | |
| − | + | setTimeout(() => { | |
| − | + | isSyncingSlider1 = false; | |
| − | + | }, 30); | |
| − | + | } | |
| − | + | } | |
| − | + | } | |
| − | + | }, | |
| − | + | }); | |
| − | + | ||
| − | + | // 컨테이너 하나에만 마우스 이벤트 적용 | |
| − | + | document.querySelector('.asset-swiper').addEventListener('pointerdown', () => { | |
| − | + | // 타임아웃 삭제 | |
| − | + | if (autoplayTimeoutId) clearTimeout(autoplayTimeoutId); | |
| − | + | ||
| + | // 현재 진행 중인 애니메이션 중단 | ||
| + | if (slider ){ | ||
| + | if(slider.animator){ | ||
| + | slider.animator.stop(); | ||
| + | } | ||
| + | } | ||
| + | if (slider2){ | ||
| + | if(slider2.animator){ | ||
| + | slider2.animator.stop(); | ||
| + | } | ||
| + | } | ||
| + | }); | ||
| + | </script> | ||
</body> | </body> | ||
}} | }} | ||
2025년 7월 18일 (금) 16:38 판
MEMORIAL SITE
장소로 알아보는
열흘 간의 항쟁 기록
그날의 기억이 머문 장소들을 따라가며, 시간 속에 남은 이야기를 천천히 만나보세요.
번호를 따라가며 클릭하면, 장소마다 담긴 역사적 의미와 당시의 이야기를 자세히 살펴볼
수 있습니다. 광주의 골목골목에 스며든 기억과 그날의 진실과 마주해보세요.
STORY DATA
카테고리별로 만나는
인문 스토리
PLATFORM
METAVERSE
기억을 잇는 가상 공간
AR Heritage
광주의 근현대 역사와 문화를 엿볼 수 있는 유산들을 증강현실
광주의 역사적 명소와 문화예술 거점을 AR 콘텐츠로 체험할 수 있는 투어입니다.
실시간 위치 정보와 장소의 맥락을 제공하여 시민들이 지역 인문자원을 향유하도록
기획되었습니다.
AR을 통해 광주 시민들이 공유하는 기억과 감성을 생생하게 느낄 수 있습니다.