mrna 新增loading&nicescroll

src/fe/mrna/css/all.css

@@ -14107,6 +14107,97 @@ p {
     height: 1.5em;
   }
 }
+.loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2999;
+  background: rgba(0, 112, 160, 0.9);
+}
+.loading__box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+}
+.loading__ani {
+  position: relative;
+  width: 8.125em;
+  height: 8.125em;
+  border-radius: 100%;
+  border: 2px solid transparent;
+  border-color: transparent rgba(255, 255, 255, 0.5) transparent rgba(255, 255, 255, 0.5);
+  animation: rotate-loading 1.5s linear 0s infinite normal;
+  transform-origin: 50% 50%;
+  -webkit-transition: all 0.5s ease-in-out;
+  -moz-transition: all 0.5s ease-in-out;
+  -ms-transition: all 0.5s ease-in-out;
+  -o-transition: all 0.5s ease-in-out;
+  transition: all 0.5s ease-in-out;
+}
+.loading__text {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 1.125em;
+  font-weight: 400;
+  line-height: 1;
+  opacity: 1;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  text-transform: uppercase;
+}
+@keyframes picIn {
+  0% {
+    transform: scale(0.7);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes rotate-loading {
+  0% {
+    transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+  }
+}
+@keyframes loading-text-opacity {
+  0% {
+    opacity: 0;
+  }
+  20% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
 .expert {
   position: relative;
 }
@@ -14230,7 +14321,7 @@ p {
   transform: translateY(-50%);
   width: 7.6em;
   height: 0.05em;
-  background-color: rgba(134, 134, 134, 0.5);
+  background-color: rgba(134, 134, 134, 0.3);
 }
 .qa__keypoint__item:nth-child(2) .qa__keypoint__pic__line-left {
   left: -7.6em;
@@ -14250,11 +14341,11 @@ p {
 .qa__keypoint__pic__frame {
   position: absolute;
   left: 50%;
-  top: 49%;
+  top: 50%;
   transform: translate(-50%, -50%);
-  width: 9em;
-  height: 9em;
-  border: 0.05em solid rgba(134, 134, 134, 0.5);
+  width: 8.8em;
+  height: 8.8em;
+  border: 0.05em solid rgba(134, 134, 134, 0.3);
   border-radius: 50%;
 }
 .qa__keypoint__exp p {
@@ -14339,8 +14430,9 @@ p {
     top: auto;
     left: 50%;
     transform: translateX(-50%);
-    width: 0.05em;
+    width: 0.1em;
     height: 3em;
+    background-color: rgba(134, 134, 134, 0.5);
   }
   .qa__keypoint__item:nth-child(2) .qa__keypoint__pic__line-left {
     top: -3em;
@@ -14357,6 +14449,7 @@ p {
   .qa__keypoint__pic__frame {
     width: 15.2em;
     height: 15.2em;
+    border: 0.05em solid rgba(134, 134, 134, 0.5);
   }
   .qa__keypoint__exp {
     flex: 1;
@@ -14563,6 +14656,7 @@ p {
   }
   .history__timeline__desc p {
     font-size: 2.1em;
+    font-weight: 400;
   }
   .history__timeline .swiper-button-prev, .history__timeline .swiper-container-rtl .swiper-button-next {
     left: 1em;

src/fe/mrna/css/all.scss

@@ -24,6 +24,7 @@
 @import "component/modal";
 @import "component/video";
 @import "component/swiper";
+@import "component/loading";
 
 // 區塊section
 @import "section/expert";

src/fe/mrna/css/component/_loading.scss

@@ -0,0 +1,106 @@
+.loading {
+    // opacity: 0;
+    // visibility: hidden;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 2999;
+    background: rgba($blue-d, 0.9);
+    &__box {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 1;
+    }
+
+    &__ani {
+        position: relative;
+        width: em(130);
+        height: em(130);
+        border-radius: 100%;
+        border: 2px solid transparent;
+        border-color: transparent rgba($white, 0.5) transparent rgba($white, 0.5);
+        animation: rotate-loading 1.5s linear 0s infinite normal;
+        transform-origin: 50% 50%;
+
+        -webkit-transition: all 0.5s ease-in-out;
+        -moz-transition: all 0.5s ease-in-out;
+        -ms-transition: all 0.5s ease-in-out;
+        -o-transition: all 0.5s ease-in-out;
+        transition: all 0.5s ease-in-out;
+    }
+
+    &__text {
+        // -moz-animation: loading-text-opacity 2s linear 0s infinite normal;
+        // -o-animation: loading-text-opacity 2s linear 0s infinite normal;
+        // -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
+        // animation: loading-text-opacity 2s linear 0s infinite normal;
+        color: rgba($white, 0.8);
+        font-size: em(18);
+        font-weight: 400;
+        line-height: 1;
+        opacity: 1;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+        text-align: center;
+        text-transform: uppercase;
+    }
+
+    @keyframes picIn {
+        0% {
+            transform: scale(0.7);
+        }
+        100% {
+            transform: scale(1);
+        }
+    }
+
+    @keyframes rotate-loading {
+        0% {
+            transform: rotate(0deg);
+            -ms-transform: rotate(0deg);
+            -webkit-transform: rotate(0deg);
+            -o-transform: rotate(0deg);
+            -moz-transform: rotate(0deg);
+        }
+
+        100% {
+            transform: rotate(360deg);
+            -ms-transform: rotate(360deg);
+            -webkit-transform: rotate(360deg);
+            -o-transform: rotate(360deg);
+            -moz-transform: rotate(360deg);
+        }
+    }
+
+    @keyframes loading-text-opacity {
+        0% {
+            opacity: 0
+        }
+
+        20% {
+            opacity: 0
+        }
+
+        50% {
+            opacity: 1
+        }
+
+        100% {
+            opacity: 0
+        }
+    }
+}

src/fe/mrna/css/section/_history.scss

@@ -200,6 +200,7 @@
             &__desc {
                 p {
                     font-size: 2.1em;
+                    font-weight: 400;
                 }
             }
             .swiper-button-prev, .swiper-container-rtl .swiper-button-next {

src/fe/mrna/css/section/_qa.scss

@@ -44,7 +44,7 @@
                     transform: translateY(-50%);
                     width: 7.6em;
                     height: 0.05em;
-                    background-color: rgba($gray, 0.5);
+                    background-color: rgba($gray, 0.3);
                     &-left {
                         left: -7.6em;
                     }
@@ -65,11 +65,11 @@
             &__frame {
                 position: absolute;
                 left: 50%;
-                top: 49%;
+                top: 50%;
                 transform: translate(-50%, -50%);
-                width: 9em;
-                height: 9em;
-                border: 0.05em solid rgba($gray, 0.5);
+                width: 8.8em;
+                height: 8.8em;
+                border: 0.05em solid rgba($gray, 0.3);
                 border-radius: 50%;
             }
         }
@@ -161,8 +161,9 @@
                         top: auto;
                         left: 50%;
                         transform: translateX(-50%);
-                        width: 0.05em;
+                        width: 0.1em;
                         height: 3em;
+                        background-color: rgba($gray, 0.5);
                         &-left {
                             top: -3em;
                         }
@@ -180,6 +181,7 @@
                 &__frame {
                     width: 15.2em;
                     height: 15.2em;
+                    border: 0.05em solid rgba($gray, 0.5);
                 }
             }
             &__exp {

src/fe/mrna/index.html

@@ -51,6 +51,17 @@
 
 <body>
 
+  <div class="wapper-loading">
+    <!-- Loading Start -->
+    <div class="loading">
+      <div class="loading__box">
+        <div class="loading__ani"></div>
+        <div class="loading__text">Loading</div>
+      </div>
+    </div>
+    <!-- Loading End -->
+  </div>
+
   <div class="wrapper">
     <header class="header">
       <div class="header__hamburger">
@@ -354,7 +365,7 @@
             <h2>mRNA疫苗常見問題</h2>
           </div>
         </div>
-        <p>
+        <p class="qa__desc">
           2023年5月5日世界衛生組織宣布結束COVID-19作為國際關注<br class="mb-show">的突發公共衛生事件<span>〔16〕</span> ，然而隨著病毒持續變異，<br class="mb-show">COVID-19尚未消失……
         </p>
         <div class="qa__keypoint">

src/fe/mrna/js/main.js

@@ -162,60 +162,66 @@ main = function () {
 		swiperHandler_history();
 
 		setTimeout(() => {
-			gsap.to(".wrapper", { duration: 0.3, autoAlpha: 1 });
 
 			detectScrollSection();
 
+			//元素動態
+			elementAni();
+
 			$(window).scroll(function(){
 				detectScrollSection();
 				ScrollTrigger.update();
 			})
 
+			if(!isMobile) {
+				$(".qa__box__scroll").niceScroll({
+					cursorcolor: "#2ba4da", // 滾動條的顏色
+					cursorwidth: "0.6em", // 滾動條寬度
+					cursorborder: "1px solid #fff", // 滾動條邊框
+					cursorborderradius: "5px", // 滾動條圓角
+					touchbehavior: false, // 是否啟用拖曳行為
+					autohidemode: false, // 不隱藏卷軸
+					background: "", // 軌道背景色
+					cursorminheight: 32, // 滾動條最小高度
+					railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 軌道內間距
+					railalign: "center", // 對其垂直軌道
+					railvalign: "center", // 對其水平軌道
+					cursordragontouch: false, // 使用觸屏模式來實現拖曳
+					grabcursorenabled: false,
+				});
+			}else {
+				$(".qa__box__scroll").niceScroll({
+					cursorcolor: "#2ba4da", // 滾動條的顏色
+					cursorwidth: "0.7em", // 滾動條寬度
+					cursorborder: "1px solid #fff", // 滾動條邊框
+					cursorborderradius: "5px", // 滾動條圓角
+					touchbehavior: false, // 是否啟用拖曳行為
+					autohidemode: false, // 不隱藏卷軸
+					background: "", // 軌道背景色
+					cursorminheight: 32, // 滾動條最小高度
+					railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 軌道內間距
+					railalign: "center", // 對其垂直軌道
+					railvalign: "center", // 對其水平軌道
+					cursordragontouch: false, // 使用觸屏模式來實現拖曳
+					grabcursorenabled: false,
+				});
+				
+			}
+
 			setTimeout(()=>{
+				gsap.to(".wapper-loading", { duration: 0.3, autoAlpha: 0, onComplete: function(){
+					$(".wapper-loading").remove();
+				} });
+				
+				$(".qa__box__scroll").getNiceScroll().resize();
+				gsap.to(".wrapper", { duration: 0.3, autoAlpha: 1 });
 
-				if(!isMobile) {
-					$(".qa__box__scroll").niceScroll({
-						cursorcolor: "#2ba4da", // 滾動條的顏色
-						cursorwidth: "0.6em", // 滾動條寬度
-						cursorborder: "1px solid #fff", // 滾動條邊框
-						cursorborderradius: "5px", // 滾動條圓角
-						touchbehavior: false, // 是否啟用拖曳行為
-						autohidemode: false, // 不隱藏卷軸
-						background: "", // 軌道背景色
-						cursorminheight: 32, // 滾動條最小高度
-						railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 軌道內間距
-						railalign: "center", // 對其垂直軌道
-						railvalign: "center", // 對其水平軌道
-						cursordragontouch: false, // 使用觸屏模式來實現拖曳
-						grabcursorenabled: false,
-					});
-				}else {
-					$(".qa__box__scroll").niceScroll({
-						cursorcolor: "#2ba4da", // 滾動條的顏色
-						cursorwidth: "0.7em", // 滾動條寬度
-						cursorborder: "1px solid #fff", // 滾動條邊框
-						cursorborderradius: "5px", // 滾動條圓角
-						touchbehavior: false, // 是否啟用拖曳行為
-						autohidemode: false, // 不隱藏卷軸
-						background: "", // 軌道背景色
-						cursorminheight: 32, // 滾動條最小高度
-						railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 軌道內間距
-						railalign: "center", // 對其垂直軌道
-						railvalign: "center", // 對其水平軌道
-						cursordragontouch: false, // 使用觸屏模式來實現拖曳
-						grabcursorenabled: false,
-					});
-				}
+				//開頭動態
+				startAni();
 
-			}, 1000);
+			}, 500);
 	
-
-			//開頭動態
-			startAni();
-
-			//元素動態
-			elementAni();
-		}, 1000);
+		}, 500);
 	}
 
 	// 桌機調整視窗大小
@@ -575,7 +581,9 @@ main = function () {
 		gsap.set(".history .container", { y: 50, autoAlpha: 0 });
 		gsap.set(".research .container", { y: 50, autoAlpha: 0 });
 		gsap.set(".research .research__item", { autoAlpha: 0 });
-		gsap.set(".qa .container", { y: 50, autoAlpha: 0 });
+		gsap.set(".qa .copywriting", { y: 50, autoAlpha: 0 });
+		gsap.set(".qa .qa__desc", { y: 50, autoAlpha: 0 });
+		gsap.set(".qa .qa__keypoint h3", { y: 50, autoAlpha: 0 });
 		gsap.set(".moreref .container", { y: 50, autoAlpha: 0 });
 		gsap.set(".qa .qa__keypoint__item:nth-child(1)", { x: 100, autoAlpha: 0 });
 		gsap.set(".qa .qa__keypoint__item:nth-child(3)", { x: -100, autoAlpha: 0 });
@@ -667,7 +675,7 @@ main = function () {
 			autoAlpha: 1,
 		});
 
-		gsap.to(".qa .container", {
+		gsap.to(".qa .copywriting", {
 			scrollTrigger: {
 				trigger: ".qa",
 				start: "top center",
@@ -676,7 +684,31 @@ main = function () {
 			},
 			duration: 0.3,
 			autoAlpha: 1,
-			y: 0
+			y:0
+		});
+
+		gsap.to(".qa .qa__desc", {
+			scrollTrigger: {
+				trigger: ".qa .qa__desc",
+				start: "top center",
+				end: "+=" + ($(".qa").height() / 3),
+				scrub: 1,
+			},
+			duration: 0.3,
+			autoAlpha: 1,
+			y:0
+		});
+
+		gsap.to(".qa .qa__keypoint h3", {
+			scrollTrigger: {
+				trigger: ".qa .qa__desc",
+				start: "top center",
+				end: "+=" + ($(".qa").height() / 3),
+				scrub: 1,
+			},
+			duration: 0.3,
+			autoAlpha: 1,
+			y:0
 		});
 
 		gsap.to(".qa .qa__keypoint__item:nth-child(1)", {
@@ -714,33 +746,6 @@ main = function () {
 			autoAlpha: 1,
 			y: 0
 		});
-
-		// gsap.to(".game__head", {
-		// 	scrollTrigger: {
-		// 		trigger: ".game",
-		// 		start: "top center",
-		// 		end: "+=" + $(".game__head").height(),
-		// 		scrub: 1,
-		// 	},
-		// 	duration: 0.3,
-		// 	scale: 1,
-		// 	autoAlpha: 1,
-		// 	y: 0,
-		// });
-
-		// gsap.to(".game__place", {
-		// 	scrollTrigger: {
-		// 		trigger: ".game",
-		// 		start: "top center",
-		// 		end: "+=" + $(".game__head").height(),
-		// 		scrub: 1,
-		// 	},
-		// 	duration: 0.3,
-		// 	scale: 1,
-		// 	autoAlpha: 1,
-		// 	y: 0,
-		// 	delay: 0.2,
-		// });
 	}
 
 	function scrollToSection() {