add animation

layouts/blog_main/list.html

@@ -34,9 +34,10 @@
         <img class="star_yellow" src="/img/blog/star_yellow.png" alt="" data-aos="fade-in" data-aos-duration="1000">
         <img class="ruler_img" src="/img/blog/ruler2.png" alt="" data-aos="fade-in" data-aos-duration="1000">
         <img class="line_01" src="/img/blog/Vector01.png" alt="">
+        <!-- <span class="dot"></span> -->
 
         <div>
-          <section>
+          <section style="position: relative;">
             <img src="/img/blog/icon/step01.png" alt="" data-gt-target="#blogTag_01" data-gt-duration="500"
               data-gt-offset="100">
             <span>
@@ -44,7 +45,7 @@
             </span>
             <h4>預售屋客變</h4>
           </section>
-
+          <span class="dot"></span>
           <section>
             <img src="/img/blog/icon/step02.png" alt="" data-gt-target="#blogTag_02" data-gt-duration="500"
               data-gt-offset="180">
@@ -680,7 +681,7 @@
         <div class="container process_mb">
           <div class="row w-100">
             <div class="col-6">
-              <section>
+              <section style="position: relative;">
                 <img src="/img/blog/icon/step01.png" alt="" data-gt-target="#blogTag_mb_01" data-gt-duration="500"
                   data-gt-offset="0">
                 <span>
@@ -688,6 +689,7 @@
                 </span>
                 <h4>預售屋客變</h4>
               </section>
+              <span class="dot"></span>
               <div class="mb_line_01"></div>
             </div>
             <div class="col-6">

layouts/collection/single.html

@@ -117,18 +117,20 @@
             </div>
         </div>
         <div class="content" style="opacity: 0;">
-            <div class="slider slider-for style_house_sec02_slide">
-                {{ range .Params.collection_slider }}
-                <div>
-                    <img class="img-fluid slide_single_img" src="./{{ .slide_img }}" alt="">
-                    <div class="slide_item_text">
-                        <p> {{ .slide_text }} </p>
-                        <!-- <p>圖說NotoJPMedium14級字行距28pt</p> -->
+            <div style="background-color: #ccc;">
+                <div class="slider slider-for style_house_sec02_slide m-auto" style="max-width: 600px">
+                    {{ range .Params.collection_slider }}
+                    <div class="slide-box">
+                        <img class="img-fluid slide_single_img" src="./{{ .slide_img }}" alt="">
+                        <div class="slide_item_text">
+                            <p> {{ .slide_text }} </p>
+                            <!-- <p>圖說NotoJPMedium14級字行距28pt</p> -->
+                        </div>
                     </div>
+                    {{ end }}
                 </div>
-                {{ end }}
             </div>
-            <div class="slider slider-nav" style="margin-top: -10px;">
+            <div class="slider slider-nav">
                 {{ range .Params.collection_slider }}
                 <div class="sec02_slide_item">
                     <img class="img-fluid slide_img" src="./{{ .slide_img }}" alt="">

themes/hugo-universal-theme-master/static/css/style.bhouse.scss

@@ -173,6 +173,138 @@ img {
   }
 }
 
+@keyframes dot {
+  0% {
+    transform: translate(0, 0);
+  }
+  30% {
+    transform: translate(717px, 0);
+  }
+  40% {
+    transform: translate(717px, 123px);
+  }
+  70% {
+    transform: translate(18px, 123px);
+  }
+  80% {
+    transform: translate(18px, 205px);
+  }
+  100% {
+    transform: translate(550px, 205px);
+  }
+}
+
+@keyframes dot_768px {
+  0% {
+    transform: translate(0, -5px);
+  }
+  30% {
+    transform: translate(620px, -5px);
+  }
+  40% {
+    transform: translate(620px, 123px);
+  }
+  70% {
+    transform: translate(20px, 123px);
+  }
+  80% {
+    transform: translate(20px, 193px);
+  }
+  100% {
+    transform: translate(490px, 193px);
+  }
+}
+
+@keyframes dot_414px {
+  0% {
+    transform: translate(0, 8px);
+  }
+  10% {
+    transform: translate(170px, 8px);
+  }
+  15% {
+    transform: translate(170px, 110px);
+  }
+  25% {
+    transform: translate(-10px, 110px);
+  }
+  30% {
+    transform: translate(-10px, 190px);
+  }
+  40% {
+    transform: translate(170px, 190px);
+  }
+  45% {
+    transform: translate(170px, 290px);
+  }
+  55% {
+    transform: translate(-10px, 290px);
+  }
+  60% {
+    transform: translate(-10px, 370px);
+  }
+  70% {
+    transform: translate(170px, 370px);
+  }
+  75% {
+    transform: translate(170px, 470px);
+  }
+  85% {
+    transform: translate(-10px, 470px);
+  }
+  90% {
+    transform: translate(-10px, 550px);
+  }
+  100% {
+    transform: translate(170px, 550px);
+  }
+}
+
+@keyframes dot_375px {
+  0% {
+    transform: translate(0, 8px);
+  }
+  10% {
+    transform: translate(155px, 8px);
+  }
+  15% {
+    transform: translate(155px, 108px);
+  }
+  25% {
+    transform: translate(-10px, 108px);
+  }
+  30% {
+    transform: translate(-10px, 185px);
+  }
+  40% {
+    transform: translate(155px, 185px);
+  }
+  45% {
+    transform: translate(155px, 285px);
+  }
+  55% {
+    transform: translate(-10px, 285px);
+  }
+  60% {
+    transform: translate(-10px, 360px);
+  }
+  70% {
+    transform: translate(155px, 360px);
+  }
+  75% {
+    transform: translate(155px, 460px);
+  }
+  85% {
+    transform: translate(-10px, 460px);
+  }
+  90% {
+    transform: translate(-10px, 535px);
+  }
+  100% {
+    transform: translate(155px, 535px);
+  }
+}
+
 /* 共通樣式 end */
 
 /* header start */
@@ -1290,7 +1422,8 @@ input[type="search"]::-webkit-search-cancel-button {
 }
 
 .img-height-vw {
-  margin: auto;
+  // margin: auto;
+  object-fit: contain;
   height: 35vw !important;
   @media (max-width: 767px) {
     height: 65vw !important;
@@ -1471,7 +1604,7 @@ input[type="search"]::-webkit-search-cancel-button {
 }
 .style_house_sec02_slide {
   .slick-prev {
-    top: 40%;
+    top: 50%;
     background: #fff;
     left: 25px;
     z-index: 1;
@@ -1500,7 +1633,7 @@ input[type="search"]::-webkit-search-cancel-button {
   }
   .slick-next {
     // position: absolute;
-    top: 40%;
+    top: 50%;
     padding-top: 2.5px;
     background: #fff;
     width: 32px;
@@ -1512,6 +1645,35 @@ input[type="search"]::-webkit-search-cancel-button {
   }
 }
 
+// .style_house_sec02 .slider-for {
+//   background-color: var(--light-gray);
+// }
+
+// .style_house_sec02 .slider-for .slick-list {
+//   background-color: var(--light-gray);
+// }
+
+.style_house_sec02 .slick-slide {
+  padding: 20px 0;
+}
+
+.style_house_sec02 .slide-box {
+  width: 100%;
+  height: 40vw;
+  display: flex !important;
+  flex-direction: column;
+  justify-content: center;
+  @media screen and (max-width: 991px) {
+    height: 50vw;
+  }
+  @media screen and (max-width: 767px) {
+    height: 80vw;
+  }
+  @media screen and (max-width: 576px) {
+    height: 100vw;
+  }
+}
+
 .style_house_sec02 .style_house_sec02_slide {
   margin-top: 30px;
 }
@@ -3434,6 +3596,35 @@ input[type="search"]::-webkit-search-cancel-button {
         top: 67%;
       }
     }
+    .dot {
+      position: absolute;
+    }
+    .dot::before {
+      content: "\A";
+      width: 10px;
+      height: 10px;
+      margin: 0 10px;
+      border-radius: 50%;
+      display: inline-block;
+      background: #649E2E;
+      position: absolute;
+      z-index: 0;
+      top: 34px;
+      left: 0;
+      animation: dot 8s infinite;
+      @media (max-width: 892px) {
+        animation: none;
+      }
+      @media (width: 768px) {
+        animation: dot_768px 8s infinite;
+      }
+      @media (width: 414px) {
+        animation: dot_414px 8s infinite;
+      }
+      @media (width: 375px) {
+        animation: dot_375px 8s infinite;
+      }
+    }
     section {
       margin-right: 80px;
       @media (max-width: 767px) {

themes/hugo-universal-theme-master/static/js/bhouse.js

@@ -42,7 +42,8 @@ window.onload = function () {
         // 預設高度為 0
         $(this).css({
           'height': 0 + 'px',
-          "margin": 'auto',
+          'object-fit': 'contain',
+          // 'margin': 'auto',
         });
       }
       heightImg.push($(this));