https://sherlock-holmes.co.kr/assets/js/main.js

1$(function(){
2
3	var myFullpage = new fullpage('#fullpage', {
4		scrollingSpeed:1000,
5
6		//모바일 화면에서는 스크롤이 되도록
7		responsiveWidth: 774,
8
9		afterLoad: function(origin, destination, direction) {
10		  // Check if the destination is a section with a video
11		  if (destination.item.classList.contains('section')) {
12			// Get the video element inside the destination section
13			var video = destination.item.querySelector('video');
14
15			// Play the video from the beginning
16			if (video) {
17			  video.currentTime = 0;
18			  video.play();
19			}
20		  }
21		},
22		onLeave: function(origin, destination, direction) {
23		  // Check if the origin is a section with a video
24		  if (origin.item.classList.contains('section')) {
25			// Get the video element inside the origin section
26			var video = origin.item.querySelector('video');
27
28			// Set the current time of the video to 0 when leaving the section
29			if (video) {
30			  video.currentTime = 0;
31			}
32		  }
33		}
34
35	});
36
37
38	$('.menu-wrap').click(function(){
39      $('.group-nav').toggleClass('on');
40      $('.menu-wrap').toggleClass('on');
41    })
42
43
44
45	//좌측 하단 네부 클릭 시 해당 섹션으로 이동
46	$('.fix-navi .dot-item').click(function(){
47		idx=$(this).index()+1;
48		index=$(this).index();
49		fullpage_api.moveTo(idx);		
50	})
51
52
53    //메인 타이틀
54    const headTxt = new SplitType('.sc-visual .title span', { types: 'words, chars', });
55
56    gsap.set('.sc-visual .title span .char',{opacity:0})
57    gsap.set('.sc-visual .sub-text',{opacity:0,y:15})
58    gsap.set('.sc-visual .btn-reservation',{opacity:0,y:15})
59
60    mainMotion = gsap.timeline({
61      paused:true,
62    })
63
64    mainMotion
65    .to('.sc-visual .title span .char',{ dalay:0.3,opacity:1,stagger:{from:"random",amount:2,}})
66    .addLabel('a')
67    .to('.sc-visual .sub-text',{opacity:1,y:0},'a')
68    .to('.sc-visual .btn-reservation',{opacity:1,y:0},'a')
69
70    mainMotion.play();
71
72
73    //메인 배경
74    gsap.set('.sc-visual .group-bg img',{transform:`scale(1.3)`})
75
76    mainbgMotion = gsap.timeline({
77      paused:true,
78    })
79
80    mainbgMotion
81    .to('.group-bg img',6,{delay:0.3,transform:`scale(1)`})
82
83    mainbgMotion.play();
84
85
86
87
88
89    //메인 테마 슬라이드
90    var themeslide = new Swiper(".themeslide_p", {
91		loop:true,
92        effect: "coverflow",
93        grabCursor: true,
94        centeredSlides: true,
95        slidesPerView: 4,
96		resistance : false, // 슬라이드 터치 저항 여부
97        coverflowEffect: {
98          rotate: 30,
99          stretch: 0,
100          depth: 100,
101          modifier: 1,
102          slideShadows: true,
103        },
104        breakpoints: {
105          // when window width is >= 320px
106          320: {
107            slidesPerView: 1.5,
108          },
109          // when window width is >= 480px
110          767: {
111            slidesPerView: 3,
112          },
113          // when window width is >= 640px
114          1024: {
115            slidesPerView: 2,
116          }
117        },
118		observer: true,	// 추가
119		observeParents: true,	// 추가
120
121      });
122
123
124      //메인 테마 슬라이드
125    var themeslide = new Swiper(".themeslide_t", {
126      loop:true,
127          effect: "coverflow",
128          grabCursor: true,
129          centeredSlides: true,
130          slidesPerView: 4,
131      resistance : false, // 슬라이드 터치 저항 여부
132          coverflowEffect: {
133            rotate: 30,
134            stretch: 0,
135            depth: 100,
136            modifier: 1,
137            slideShadows: true,
138          },
139          breakpoints: {
140            // when window width is >= 320px
141            320: {
142              slidesPerView: 1.5,
143            },
144            // when window width is >= 480px
145            767: {
146              slidesPerView: 3,
147            },
148            // when window width is >= 640px
149            1024: {
150              slidesPerView: 4,
151            }
152          },
153      observer: true,	// 추가
154      observeParents: true,	// 추가
155  
156        });
157
158
159        //메인 테마 슬라이드
160    var themeslide = new Swiper(".themeslide", {
161      loop:true,
162          effect: "coverflow",
163          grabCursor: true,
164          centeredSlides: true,
165          slidesPerView: 4,
166      resistance : false, // 슬라이드 터치 저항 여부
167          coverflowEffect: {
168            rotate: 30,
169            stretch: 0,
170            depth: 100,
171            modifier: 1,
172            slideShadows: true,
173          },
174          breakpoints: {
175            // when window width is >= 320px
176            320: {
177              slidesPerView: 1.5,
178            },
179            // when window width is >= 480px
180            767: {
181              slidesPerView: 3,
182            },
183            // when window width is >= 640px
184            1024: {
185              slidesPerView: 6,
186            }
187          },
188      observer: true,	// 추가
189      observeParents: true,	// 추가
190  
191        });
192
193  
194})