|
|
@@ -134,11 +134,6 @@ main = function () {
|
|
134
|
134
|
$(".modal-test .modal__game__item:nth-child("+num+") .modal__game__ans").css("display", "flex");
|
|
135
|
135
|
}
|
|
136
|
136
|
|
|
137
|
|
- // 初始元素動態
|
|
138
|
|
- function elementReset() {
|
|
139
|
|
- // gsap.set(".qa__item", { y: 50, autoAlpha: 0 });
|
|
140
|
|
- }
|
|
141
|
|
-
|
|
142
|
137
|
// 開始程序
|
|
143
|
138
|
function startHandler() {
|
|
144
|
139
|
// 調整頁面font-size
|
|
|
@@ -149,7 +144,7 @@ main = function () {
|
|
149
|
144
|
|
|
150
|
145
|
setTimeout(() => {
|
|
151
|
146
|
headerH = $(".header").outerHeight();
|
|
152
|
|
- console.log("headerH: " + headerH);
|
|
|
147
|
+ // console.log("headerH: " + headerH);
|
|
153
|
148
|
$(".wrapper").css("padding-top", headerH);
|
|
154
|
149
|
}, 800);
|
|
155
|
150
|
} else {
|
|
|
@@ -169,60 +164,57 @@ main = function () {
|
|
169
|
164
|
setTimeout(() => {
|
|
170
|
165
|
gsap.to(".wrapper", { duration: 0.3, autoAlpha: 1 });
|
|
171
|
166
|
|
|
172
|
|
- if(!isMobile) {
|
|
173
|
|
- $(".qa__box__scroll").niceScroll({
|
|
174
|
|
- cursorcolor: "#2ba4da", // 滾動條的顏色
|
|
175
|
|
- cursorwidth: "0.6em", // 滾動條寬度
|
|
176
|
|
- cursorborder: "1px solid #fff", // 滾動條邊框
|
|
177
|
|
- cursorborderradius: "5px", // 滾動條圓角
|
|
178
|
|
- touchbehavior: false, // 是否啟用拖曳行為
|
|
179
|
|
- autohidemode: false, // 不隱藏卷軸
|
|
180
|
|
- background: "", // 軌道背景色
|
|
181
|
|
- cursorminheight: 32, // 滾動條最小高度
|
|
182
|
|
- railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 軌道內間距
|
|
183
|
|
- railalign: "center", // 對其垂直軌道
|
|
184
|
|
- railvalign: "center", // 對其水平軌道
|
|
185
|
|
- cursordragontouch: false, // 使用觸屏模式來實現拖曳
|
|
186
|
|
- grabcursorenabled: false,
|
|
187
|
|
- });
|
|
188
|
|
- }else {
|
|
189
|
|
- $(".qa__box__scroll").niceScroll({
|
|
190
|
|
- cursorcolor: "#2ba4da", // 滾動條的顏色
|
|
191
|
|
- cursorwidth: "0.7em", // 滾動條寬度
|
|
192
|
|
- cursorborder: "1px solid #fff", // 滾動條邊框
|
|
193
|
|
- cursorborderradius: "5px", // 滾動條圓角
|
|
194
|
|
- touchbehavior: false, // 是否啟用拖曳行為
|
|
195
|
|
- autohidemode: false, // 不隱藏卷軸
|
|
196
|
|
- background: "", // 軌道背景色
|
|
197
|
|
- cursorminheight: 32, // 滾動條最小高度
|
|
198
|
|
- railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 軌道內間距
|
|
199
|
|
- railalign: "center", // 對其垂直軌道
|
|
200
|
|
- railvalign: "center", // 對其水平軌道
|
|
201
|
|
- cursordragontouch: false, // 使用觸屏模式來實現拖曳
|
|
202
|
|
- grabcursorenabled: false,
|
|
203
|
|
- });
|
|
204
|
|
- }
|
|
205
|
|
-
|
|
206
|
167
|
detectScrollSection();
|
|
207
|
168
|
|
|
208
|
169
|
$(window).scroll(function(){
|
|
209
|
170
|
detectScrollSection();
|
|
|
171
|
+ ScrollTrigger.update();
|
|
210
|
172
|
})
|
|
211
|
173
|
|
|
212
|
174
|
setTimeout(()=>{
|
|
213
|
|
- // 測試
|
|
214
|
|
- // swiper_history.slideNext();
|
|
215
|
|
- // swiper_history.slideTo(4, 1000)
|
|
216
|
175
|
|
|
|
176
|
+ if(!isMobile) {
|
|
|
177
|
+ $(".qa__box__scroll").niceScroll({
|
|
|
178
|
+ cursorcolor: "#2ba4da", // 滾動條的顏色
|
|
|
179
|
+ cursorwidth: "0.6em", // 滾動條寬度
|
|
|
180
|
+ cursorborder: "1px solid #fff", // 滾動條邊框
|
|
|
181
|
+ cursorborderradius: "5px", // 滾動條圓角
|
|
|
182
|
+ touchbehavior: false, // 是否啟用拖曳行為
|
|
|
183
|
+ autohidemode: false, // 不隱藏卷軸
|
|
|
184
|
+ background: "", // 軌道背景色
|
|
|
185
|
+ cursorminheight: 32, // 滾動條最小高度
|
|
|
186
|
+ railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 軌道內間距
|
|
|
187
|
+ railalign: "center", // 對其垂直軌道
|
|
|
188
|
+ railvalign: "center", // 對其水平軌道
|
|
|
189
|
+ cursordragontouch: false, // 使用觸屏模式來實現拖曳
|
|
|
190
|
+ grabcursorenabled: false,
|
|
|
191
|
+ });
|
|
|
192
|
+ }else {
|
|
|
193
|
+ $(".qa__box__scroll").niceScroll({
|
|
|
194
|
+ cursorcolor: "#2ba4da", // 滾動條的顏色
|
|
|
195
|
+ cursorwidth: "0.7em", // 滾動條寬度
|
|
|
196
|
+ cursorborder: "1px solid #fff", // 滾動條邊框
|
|
|
197
|
+ cursorborderradius: "5px", // 滾動條圓角
|
|
|
198
|
+ touchbehavior: false, // 是否啟用拖曳行為
|
|
|
199
|
+ autohidemode: false, // 不隱藏卷軸
|
|
|
200
|
+ background: "", // 軌道背景色
|
|
|
201
|
+ cursorminheight: 32, // 滾動條最小高度
|
|
|
202
|
+ railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 軌道內間距
|
|
|
203
|
+ railalign: "center", // 對其垂直軌道
|
|
|
204
|
+ railvalign: "center", // 對其水平軌道
|
|
|
205
|
+ cursordragontouch: false, // 使用觸屏模式來實現拖曳
|
|
|
206
|
+ grabcursorenabled: false,
|
|
|
207
|
+ });
|
|
|
208
|
+ }
|
|
217
|
209
|
|
|
218
|
210
|
}, 1000);
|
|
219
|
211
|
|
|
220
|
212
|
|
|
221
|
|
- // // 開頭動態
|
|
222
|
|
- // startAni();
|
|
|
213
|
+ //開頭動態
|
|
|
214
|
+ startAni();
|
|
223
|
215
|
|
|
224
|
|
- // // 元素動態
|
|
225
|
|
- // elementAni();
|
|
|
216
|
+ //元素動態
|
|
|
217
|
+ elementAni();
|
|
226
|
218
|
}, 1000);
|
|
227
|
219
|
}
|
|
228
|
220
|
|
|
|
@@ -259,7 +251,7 @@ main = function () {
|
|
259
|
251
|
// 初始menu
|
|
260
|
252
|
function initMenu() {
|
|
261
|
253
|
let menuListH = $(".header__nav").outerHeight();
|
|
262
|
|
- console.log("menuListH: "+menuListH)
|
|
|
254
|
+ // console.log("menuListH: "+menuListH)
|
|
263
|
255
|
gsap.set(".header__nav", { top: -menuListH });
|
|
264
|
256
|
}
|
|
265
|
257
|
|
|
|
@@ -574,14 +566,49 @@ main = function () {
|
|
574
|
566
|
|
|
575
|
567
|
// ==================== 滑動動態 ====================
|
|
576
|
568
|
|
|
|
569
|
+
|
|
|
570
|
+ // 初始元素動態
|
|
|
571
|
+ function elementReset() {
|
|
|
572
|
+ gsap.set(".expert__video", { y: 50, autoAlpha: 0 });
|
|
|
573
|
+ gsap.set(".expert__title", { y: 50, autoAlpha: 0 });
|
|
|
574
|
+ gsap.set(".understand .container", { y: 50, autoAlpha: 0 });
|
|
|
575
|
+ gsap.set(".history .container", { y: 50, autoAlpha: 0 });
|
|
|
576
|
+ gsap.set(".research .container", { y: 50, autoAlpha: 0 });
|
|
|
577
|
+ gsap.set(".research .research__item", { autoAlpha: 0 });
|
|
|
578
|
+ gsap.set(".qa .container", { y: 50, autoAlpha: 0 });
|
|
|
579
|
+ gsap.set(".moreref .container", { y: 50, autoAlpha: 0 });
|
|
|
580
|
+ gsap.set(".qa .qa__keypoint__item:nth-child(1)", { x: 100, autoAlpha: 0 });
|
|
|
581
|
+ gsap.set(".qa .qa__keypoint__item:nth-child(3)", { x: -100, autoAlpha: 0 });
|
|
|
582
|
+ }
|
|
|
583
|
+
|
|
577
|
584
|
function startAni() {
|
|
578
|
|
- // gsap.to(".kv__pic", { duration: 0.5, scale:1 });
|
|
579
|
|
- gsap.to(".kv__copywriting", {
|
|
580
|
|
- duration: 0.5,
|
|
581
|
|
- x: 0,
|
|
582
|
|
- autoAlpha: 1,
|
|
583
|
|
- delay: 0.3,
|
|
584
|
|
- });
|
|
|
585
|
+ if(!isMobile) {
|
|
|
586
|
+ gsap.to(".expert__video", {
|
|
|
587
|
+ duration: 1,
|
|
|
588
|
+ y: 0,
|
|
|
589
|
+ autoAlpha: 1,
|
|
|
590
|
+ delay: 0.3,
|
|
|
591
|
+ });
|
|
|
592
|
+ gsap.to(".expert__title", {
|
|
|
593
|
+ duration: 0.6,
|
|
|
594
|
+ y: 0,
|
|
|
595
|
+ autoAlpha: 1,
|
|
|
596
|
+ delay: 0.6,
|
|
|
597
|
+ });
|
|
|
598
|
+ }else {
|
|
|
599
|
+ gsap.to(".expert__video", {
|
|
|
600
|
+ duration: 1,
|
|
|
601
|
+ y: 0,
|
|
|
602
|
+ autoAlpha: 1,
|
|
|
603
|
+ delay: 0.3,
|
|
|
604
|
+ });
|
|
|
605
|
+ gsap.to(".expert__title", {
|
|
|
606
|
+ duration: 0.6,
|
|
|
607
|
+ y: 0,
|
|
|
608
|
+ autoAlpha: 1,
|
|
|
609
|
+ delay: 0.3,
|
|
|
610
|
+ });
|
|
|
611
|
+ }
|
|
585
|
612
|
}
|
|
586
|
613
|
|
|
587
|
614
|
function elementAni() {
|
|
|
@@ -592,87 +619,128 @@ main = function () {
|
|
592
|
619
|
scroller: "body",
|
|
593
|
620
|
});
|
|
594
|
621
|
|
|
595
|
|
- function qaItemAni($el) {
|
|
596
|
|
- gsap.to($el, {
|
|
597
|
|
- scrollTrigger: {
|
|
598
|
|
- trigger: $el,
|
|
599
|
|
- start: "top bottom-=20%", // when the top of the trigger hits the top of the viewport
|
|
600
|
|
- end: "+=" + $($el).height() / 2, // end after scrolling 500px beyond the start
|
|
601
|
|
- scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
|
|
602
|
|
- // markers: true
|
|
603
|
|
- },
|
|
604
|
|
- duration: 1,
|
|
605
|
|
- y: 0,
|
|
606
|
|
- autoAlpha: 1,
|
|
607
|
|
- });
|
|
608
|
|
- }
|
|
|
622
|
+ gsap.to(".understand .container", {
|
|
|
623
|
+ scrollTrigger: {
|
|
|
624
|
+ trigger: ".understand",
|
|
|
625
|
+ start: "top center",
|
|
|
626
|
+ end: "+=" + ($(".understand").height() / 3),
|
|
|
627
|
+ scrub: 1,
|
|
|
628
|
+ },
|
|
|
629
|
+ duration: 0.3,
|
|
|
630
|
+ autoAlpha: 1,
|
|
|
631
|
+ y: 0
|
|
|
632
|
+ });
|
|
609
|
633
|
|
|
610
|
|
- qaItemAni(".qa__item-keypoints");
|
|
611
|
|
- qaItemAni(".qa__item-group");
|
|
612
|
|
- qaItemAni(".qa__item-positive");
|
|
613
|
|
- qaItemAni(".qa__item-child");
|
|
|
634
|
+ gsap.to(".history .container", {
|
|
|
635
|
+ scrollTrigger: {
|
|
|
636
|
+ trigger: ".history",
|
|
|
637
|
+ start: "top center",
|
|
|
638
|
+ end: "+=" + ($(".history").height() / 3),
|
|
|
639
|
+ scrub: 1,
|
|
|
640
|
+ },
|
|
|
641
|
+ duration: 0.3,
|
|
|
642
|
+ autoAlpha: 1,
|
|
|
643
|
+ y: 0
|
|
|
644
|
+ });
|
|
|
645
|
+
|
|
|
646
|
+ gsap.to(".research .container", {
|
|
|
647
|
+ scrollTrigger: {
|
|
|
648
|
+ trigger: ".research",
|
|
|
649
|
+ start: "top center",
|
|
|
650
|
+ end: "+=" + ($(".research").height() / 3),
|
|
|
651
|
+ scrub: 1,
|
|
|
652
|
+ },
|
|
|
653
|
+ duration: 0.3,
|
|
|
654
|
+ autoAlpha: 1,
|
|
|
655
|
+ y: 0
|
|
|
656
|
+ });
|
|
614
|
657
|
|
|
615
|
|
- gsap.to(".brandvideo .mainvideo__video__frame", {
|
|
|
658
|
+ gsap.to(".research .research__item", {
|
|
616
|
659
|
scrollTrigger: {
|
|
617
|
|
- trigger: ".mainvideo .bg",
|
|
|
660
|
+ trigger: ".research",
|
|
618
|
661
|
start: "top center",
|
|
619
|
|
- end: "+=" + $(".mainvideo__video__frame").height(),
|
|
|
662
|
+ end: "+=" + ($(".history").height() / 2),
|
|
620
|
663
|
scrub: 1,
|
|
621
|
664
|
},
|
|
622
|
|
- duration: 1,
|
|
623
|
|
- scale: 1,
|
|
|
665
|
+ stagger: 0.3,
|
|
|
666
|
+ duration: 0.3,
|
|
624
|
667
|
autoAlpha: 1,
|
|
625
|
668
|
});
|
|
626
|
669
|
|
|
627
|
|
- gsap.to(".propagandavideo-pc", {
|
|
|
670
|
+ gsap.to(".qa .container", {
|
|
628
|
671
|
scrollTrigger: {
|
|
629
|
|
- trigger: ".propagandavideo-pc",
|
|
|
672
|
+ trigger: ".qa",
|
|
630
|
673
|
start: "top center",
|
|
631
|
|
- end: "+=" + $(".propagandavideo-pc").height() / 3,
|
|
|
674
|
+ end: "+=" + ($(".qa").height() / 3),
|
|
632
|
675
|
scrub: 1,
|
|
633
|
676
|
},
|
|
634
|
|
- duration: 0.5,
|
|
|
677
|
+ duration: 0.3,
|
|
635
|
678
|
autoAlpha: 1,
|
|
636
|
|
- y: 0,
|
|
|
679
|
+ y: 0
|
|
637
|
680
|
});
|
|
638
|
681
|
|
|
639
|
|
- gsap.to(".process__pic", {
|
|
|
682
|
+ gsap.to(".qa .qa__keypoint__item:nth-child(1)", {
|
|
640
|
683
|
scrollTrigger: {
|
|
641
|
|
- trigger: ".process .bg",
|
|
|
684
|
+ trigger: ".qa",
|
|
642
|
685
|
start: "top center",
|
|
643
|
|
- end: "+=" + $(".process__pic").height(),
|
|
|
686
|
+ end: "+=" + ($(".qa").height() / 3),
|
|
644
|
687
|
scrub: 1,
|
|
645
|
688
|
},
|
|
646
|
|
- duration: 0.5,
|
|
|
689
|
+ duration: 0.3,
|
|
647
|
690
|
autoAlpha: 1,
|
|
|
691
|
+ x: 0
|
|
648
|
692
|
});
|
|
649
|
693
|
|
|
650
|
|
- gsap.to(".game__head", {
|
|
|
694
|
+ gsap.to(".qa .qa__keypoint__item:nth-child(3)", {
|
|
651
|
695
|
scrollTrigger: {
|
|
652
|
|
- trigger: ".game",
|
|
|
696
|
+ trigger: ".qa",
|
|
653
|
697
|
start: "top center",
|
|
654
|
|
- end: "+=" + $(".game__head").height(),
|
|
|
698
|
+ end: "+=" + ($(".qa").height() / 3),
|
|
655
|
699
|
scrub: 1,
|
|
656
|
700
|
},
|
|
657
|
701
|
duration: 0.3,
|
|
658
|
|
- scale: 1,
|
|
659
|
702
|
autoAlpha: 1,
|
|
660
|
|
- y: 0,
|
|
|
703
|
+ x: 0
|
|
661
|
704
|
});
|
|
662
|
705
|
|
|
663
|
|
- gsap.to(".game__place", {
|
|
|
706
|
+ gsap.to(".moreref .container", {
|
|
664
|
707
|
scrollTrigger: {
|
|
665
|
|
- trigger: ".game",
|
|
|
708
|
+ trigger: ".moreref",
|
|
666
|
709
|
start: "top center",
|
|
667
|
|
- end: "+=" + $(".game__head").height(),
|
|
|
710
|
+ end: "+=" + ($(".moreref").height() / 3),
|
|
668
|
711
|
scrub: 1,
|
|
669
|
712
|
},
|
|
670
|
713
|
duration: 0.3,
|
|
671
|
|
- scale: 1,
|
|
672
|
714
|
autoAlpha: 1,
|
|
673
|
|
- y: 0,
|
|
674
|
|
- delay: 0.2,
|
|
|
715
|
+ y: 0
|
|
675
|
716
|
});
|
|
|
717
|
+
|
|
|
718
|
+ // gsap.to(".game__head", {
|
|
|
719
|
+ // scrollTrigger: {
|
|
|
720
|
+ // trigger: ".game",
|
|
|
721
|
+ // start: "top center",
|
|
|
722
|
+ // end: "+=" + $(".game__head").height(),
|
|
|
723
|
+ // scrub: 1,
|
|
|
724
|
+ // },
|
|
|
725
|
+ // duration: 0.3,
|
|
|
726
|
+ // scale: 1,
|
|
|
727
|
+ // autoAlpha: 1,
|
|
|
728
|
+ // y: 0,
|
|
|
729
|
+ // });
|
|
|
730
|
+
|
|
|
731
|
+ // gsap.to(".game__place", {
|
|
|
732
|
+ // scrollTrigger: {
|
|
|
733
|
+ // trigger: ".game",
|
|
|
734
|
+ // start: "top center",
|
|
|
735
|
+ // end: "+=" + $(".game__head").height(),
|
|
|
736
|
+ // scrub: 1,
|
|
|
737
|
+ // },
|
|
|
738
|
+ // duration: 0.3,
|
|
|
739
|
+ // scale: 1,
|
|
|
740
|
+ // autoAlpha: 1,
|
|
|
741
|
+ // y: 0,
|
|
|
742
|
+ // delay: 0.2,
|
|
|
743
|
+ // });
|
|
676
|
744
|
}
|
|
677
|
745
|
|
|
678
|
746
|
function scrollToSection() {
|
Sherry
2 년 전
