update

goto.js

@@ -5,8 +5,8 @@ $(".item-down").click(function () {
   $('.designer-nav').slideToggle();
 });
 
-var scene = document.getElementById('scene');
-var parallaxInstance = new Parallax(scene);
+// var scene = document.getElementById('scene');
+// var parallaxInstance = new Parallax(scene);
 
 
 $("*").each(function (index, element) {
@@ -67,6 +67,7 @@ $(".link").click(function () {
 
 // 文字動畫
 const sec = document.querySelectorAll('.sec');
+console.log(sec.length);
 const title = document.querySelectorAll('.title');
 const cover = document.querySelectorAll('.cover');
 const test_content = document.querySelectorAll('.test_content');
@@ -96,26 +97,27 @@ function checkSlide() {
     })
 };
 window.addEventListener('scroll', checkSlide);
+window.addEventListener('scroll', sec03PlantImg);
+window.addEventListener('scroll', sec03BottomImg);
+
+console.log(document.querySelector('.sec03-big').offsetTop);
+
+function sec03PlantImg() {
+  const slideInAt = window.scrollY + window.innerHeight;
+  const toTop = document.querySelector('.sec03-big').offsetTop + document.querySelector('.sec03_plant').offsetTop;
+  const isHalfShown = slideInAt > toTop ;
+  console.log(toTop);
+  if (isHalfShown) {
+    document.querySelector('.sec03_plant .p_cover').classList.add('slidein');
+  }
+};
 
-// const sec2 = document.querySelectorAll('.sec2');
-// const cover2 = document.querySelectorAll('.cover2');
-
-// function checkSlide2() {
-//     console.log('pass');
-//     sec2.forEach((block2, i) => {
-//         // half way through the image
-//         //const test = document.querySelector('.test');
-//         const slideInAt2 = window.scrollY + window.innerHeight;
-//         console.log(slideInAt2);
-//         //console.log(test.offsetTop);
-//         // bottom of the image
-//         const isHalfShown2 = slideInAt2 > block2.offsetTop;
-//         if (isHalfShown2) {
-//             console.log('active');
-//             cover2[i].classList.add('slidein2');
-//             // test.firstElementChild.classList.add('fadein');
-//         }
-//     })
-// };
-
-// window.addEventListener('scroll', checkSlide2);
+function sec03BottomImg() {
+  const slideInAt = window.scrollY + window.innerHeight;
+  const toTop = document.querySelector('.sec03-big').offsetTop + document.querySelector('.sec_bottom').offsetTop + 300;
+  const isHalfShown = slideInAt > toTop ;
+  console.log(toTop);
+  if (isHalfShown) {
+    document.querySelector('.sec_bottom .b_cover').classList.add('slidein');
+  }
+};

index.html

@@ -201,12 +201,12 @@
                             </div>
                         </div>
                     </div>
-
+    
                 </div>
             </div>
-
+    
         </section>
-
+    
         <!-- sec02桌機板 -->
         <section class="sec02">
             <img class="img-fluid" src="./img/sec01/sec01-bottom.png" alt="">
@@ -222,8 +222,8 @@
                                     src="./img/sec01/sec02-238.png" alt="">
                             </div>
                             <img class="sec02-img-m" src="./img/sec02/sec02-img-m.png" alt="">
-                            <img style="position:absolute; top:240px; z-index: 1; width:52vw;"
-                                src="./img/object/404.png" alt="">
+                            <img style="position:absolute; top:240px; z-index: 1; width:52vw;" src="./img/object/404.png"
+                                alt="">
                         </div>
                         <div class="col-7 col-lg-6">
                             <div class="sec02-right">
@@ -241,7 +241,7 @@
                                     </div>
                                 </div>
                             </div>
-
+    
                         </div>
                     </div>
                 </div>
@@ -253,8 +253,7 @@
                                     <div class="title_back">
                                         <div class="title">
                                             <div style="display: none;" class="cover"></div>
-                                            <h3 class="d-inline ps-5 fw-cold">ISSUE2&emsp;<span
-                                                    class="fw-light">——</span>
+                                            <h3 class="d-inline ps-5 fw-cold">ISSUE2&emsp;<span class="fw-light">——</span>
                                             </h3>
                                             <h1>豪宅的條件</h1>
                                         </div>
@@ -292,7 +291,7 @@
                 </div>
             </div>
             <img class="img-fluid" src="./img/banner-bottom.png" alt="">
-
+    
         </section>
         <!-- sec02手機板 -->
         <section class="sec02-m">
@@ -300,8 +299,7 @@
             <div class="sec02-content">
                 <div class="row mx-0 px-0">
                     <div class="col-5 col-lg-6 mx-0 px-0">
-                        <img style="position: relative; z-index: 3;" class="sec02-img-m"
-                            src="./img/sec02/sec02-img-m.png" alt="">
+                        <img style="position: relative; z-index: 3;" class="sec02-img-m" src="./img/sec02/sec02-img-m.png" alt="">
                         <img style="position: absolute;" class="object188-m" src="./img/object/215.png" alt="">
                     </div>
                     <div class="col-7 col-lg-6 ps-0">
@@ -347,54 +345,46 @@
                                 </div>
                             </div>
                         </div>
-
+    
                     </div>
                 </div>
             </div>
             <img class="img-fluid" src="./img/banner-bottom.png" alt="">
-
+    
         </section>
         <section class="sec03-big">
-                <div class="sec03 sec">
-                    <div class="sec03-content d-flex justify-content-end">
-                        <div class="test">
-                            <div class="cover"></div>
-                            <img class="sec03-img01 img-fluid" src="./img/object/mockup-wall-with-plants-shelf.png" alt="">
-                        </div>
-                        <img class="sec03-img02" src="./img/object/405.png" alt="">
-                        <div style="display: none;" class="title_back">
-                            <div class="cover"></div>
-                            <h4 class="title"></h4>
-                        </div>
-                        <div style="display: none;" class="test_content"></div>
+            <section class="sec03 sec03_plant">
+                <div class="sec03-content d-flex justify-content-end">
+                    <div class="test">
+                        <div class="p_cover"></div>
+                        <img class="sec03-img01 img-fluid" src="./img/object/mockup-wall-with-plants-shelf.png" alt="">
                     </div>
+                    <img class="sec03-img02" src="./img/object/405.png" alt="">
                 </div>
-            <div style="position: relative;" class="sec03 sec d-flex justify-content-end">
+            </section>
+            <div style="position: relative;" class="sec03 sec_bottom d-flex justify-content-end">
                 <div style="overflow: hidden;" id="sec03-img03-box" class="test">
-                    <div style="height: 75%;  bottom:5vw;" class="cover"></div>
+                    <div style="height: 75%;  bottom:5vw;" class="b_cover"></div>
                     <img class="img-fluid sec03-img03 pt-4"
                         src="./img/object/still-life-home-cozy-beautiful-decor-living-room-vase-with-spring-flowers-candles-wooden-background-concept-interior-details.png"
                         alt="">
+                    </div>
                 </div>
-                <div style="display: none;" class="title_back">
-                    <div class="cover"></div>
-                    <h4 class="title"></h4>
-                </div>
-            </div>
-
+    
         </section>
-        <div style="display: none;" class="test_content"></div>
+        
         <section class="sec04">
             <img class="img-fluid" src="./img/sec01/sec01-bottom.png" alt="">
             <div class="sec04-content sec">
                 <div class="sec04-int mb-5">
-                    <img style="position: absolute; z-index: 30;" class="object182" src="./img/object/182.png" alt="">
+                        <img style="position: absolute; z-index: 30;" class="object182" src="./img/object/182.png" alt="">
                     <div class="title_back">
                         <div id="issue3" class="title">
                             <h3 class="d-inline ps-5">ISSUE3&emsp;<span class="fw-light">——</span></h3>
                             <h1>設計師眼中的豪宅</h1>
                         </div>
                     </div>
+                    <div class="cover d-none"></div>
                     <div class="sec04-text text-center test_content">
                         <p>何謂『豪宅』？豪宅如人,華麗的衣裳下,深刻的內涵更引人尋味；真正的豪宅,裡子面子同等重要,要讓人享受其中,不覺厭倦。</p>
                         <div class="mt-sm-1 mt-lg-3">
@@ -421,8 +411,7 @@
                                         </div>
                                         <div class="arrow-right rounded-circle d-flex justify-content-center align-items-center"
                                             style="width:40px;height: 40px;">
-                                            <img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png"
-                                                alt="">
+                                            <img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png" alt="">
                                         </div>
                                     </div>
                                 </a>
@@ -444,8 +433,7 @@
                                         </div>
                                         <div class="arrow-right rounded-circle d-flex justify-content-center align-items-center"
                                             style="width:40px;height: 40px;">
-                                            <img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png"
-                                                alt="">
+                                            <img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png" alt="">
                                         </div>
                                     </div>
                                 </a>
@@ -461,8 +449,7 @@
                 <div class="sec04-designers">
                     <div class="row px-0 mx-0">
                         <div class="col-lg-6 px-lg-2">
-                            <div class="sec04-left-card" data-aos="fade-up" data-aos-duration="1000"
-                                data-aos-delay="50">
+                            <div class="sec04-left-card" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="50">
                                 <div style="overflow: hidden;">
                                     <img class="img-fluid" src="./img/sec04/02.png" alt="">
                                 </div>
@@ -477,17 +464,15 @@
                                         </div>
                                         <div class="arrow-right rounded-circle d-flex justify-content-center align-items-center"
                                             style="width:40px;height: 40px;">
-                                            <img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png"
-                                                alt="">
+                                            <img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png" alt="">
                                         </div>
                                     </div>
                                 </a>
-
+    
                             </div>
                         </div>
                         <div class="col-lg-6 px-lg-2">
-                            <div class="sec04-right-card" data-aos="fade-up" data-aos-duration="1000"
-                                data-aos-delay="50">
+                            <div class="sec04-right-card" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="50">
                                 <div style="overflow: hidden;">
                                     <img class="img-fluid" src="./img/sec04/03.png" alt="">
                                 </div>
@@ -502,13 +487,12 @@
                                         </div>
                                         <div class="arrow-right rounded-circle d-flex justify-content-center align-items-center"
                                             style="width:40px;height: 40px;">
-                                            <img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png"
-                                                alt="">
+                                            <img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png" alt="">
                                         </div>
                                     </div>
                                 </a>
                             </div>
-
+                            
                             <img style="position: absolute;" class="object242" src="./img/object/242.png" alt="">
                         </div>
                     </div>
@@ -522,17 +506,16 @@
                     </div>
                 </div>
             </div>
-
+    
         </section>
         <div style="width: 90vw; position: relative;" class="gotop2 text-end">
             <img data-gt-target="#top" data-gt-duration="500" data-gt-offset="0"
                 style="position: absolute; bottom:10px; right:20px;" width="60" src="./img/gotop1.png" alt="">
         </div>
         <div class="gotop text-center pb-5">
-            <img width="100px" data-gt-target="#top" data-gt-duration="500" data-gt-offset="0" src="./img/gotop.png"
-                alt="">
+            <img width="100px" data-gt-target="#top" data-gt-duration="500" data-gt-offset="0" src="./img/gotop.png" alt="">
         </div>
-
+    
         <footer id="footer" class="container-fluid px-0 mx-0">
             <p class="mb-0">幸福空間 版權所有 &copy;Gorgeous Space Go.Ltd. All Rights Reserved.</p>
         </footer>

style.css

@@ -232,6 +232,12 @@ body {
   background-size: cover;
 }
 
+@media screen and (max-width: 767px) {
+  .banner #scene {
+    display: none;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .banner #banner-des {
     display: none;
@@ -1985,7 +1991,7 @@ body {
   position: relative;
 }
 
-.test .cover {
+.test .cover, .test .p_cover, .test .b_cover {
   width: 99.9%;
   position: absolute;
   z-index: 4;
@@ -2010,7 +2016,7 @@ body {
   height: 80%;
 }
 
-.test .cover.slidein {
+.test .cover.slidein, .test .p_cover.slidein, .test .b_cover.slidein {
   -webkit-animation: slidein 1.5s forwards;
   animation: slidein 1.5s forwards;
 }

style.scss

@@ -183,6 +183,11 @@ body {
     background: url(./img/bg.png);
     background-repeat: no-repeat;
     background-size: cover;
+    #scene{
+        @media screen and(max-width:$moblie) {
+            display: none;
+        }
+    }
     #banner-des {
         @media screen and(max-width:$moblie) {
             display: none;
@@ -1450,7 +1455,7 @@ body {
     position: relative;
 }
 // 圖片動畫
-.test .cover {
+.test .cover, .test .p_cover, .test .b_cover {
     width: 99.9%;
     position: absolute;
     z-index: 4;
@@ -1472,7 +1477,7 @@ body {
     height: 80%;
 }
 // 圖片動畫
-.test .cover.slidein {
+.test .cover.slidein, .test .p_cover.slidein, .test .b_cover.slidein {
     -webkit-animation: slidein 1.5s forwards;
     animation: slidein 1.5s forwards;
 }