wip #2747 @7

diff --git a/package.json b/package.json
index 7b1f9a40a912621341a445c4d120ea90565e187f..6310d35d9a84f4737200d15a9065fd5f79e451b0 100644 (file)
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
         "bootstrap": "^4.0.0",
         "browser-sync": "^2.26.5",
         "browser-sync-webpack-plugin": "2.0.1",
-        "cross-env": "^5.1",
+        "cross-env": "^5.2.0",
+        "gsap": "^2.1.3",
         "jquery": "^3.2",
         "laravel-mix": "^4.0.7",
         "laravel-mix-purgecss": "^4.1.0",
@@ -24,12 +25,11 @@
         "portal-vue": "^2.1.5",
         "resolve-url-loader": "^2.3.1",
         "rupture": "^0.7.1",
-        "stylus": "acidjazz/stylus#dev",
+        "stylus": "github:acidjazz/stylus#dev",
         "stylus-loader": "^3.0.2",
         "tailwindcss": "^1.0.4",
         "vue": "^2.6.10",
         "vue-slide-up-down": "^1.7.2",
-        "vue-template-compiler": "^2.6.10",
-        "gsap": "^2.1.3"
+        "vue-template-compiler": "^2.6.10"
     }
 }

diff --git a/public/_modules/home-slider/index.html b/public/_modules/home-slider/index.html
index 498db694476e1ae4f7c2fd87760153f682d4d991..d9b492b266cd3cf781eda6d7287f151b7964bd6f 100644 (file)
--- a/public/_modules/home-slider/index.html
+++ b/public/_modules/home-slider/index.html
@@ -58,13 +58,15 @@
                         </div>
                     </div>
                 </div>
-                <div class="column overlap-bottom relative slide-mask">
+                <div class="column overlap-bottom relative">
+                <div class="slide-mask">
                     <div class="bg-image h-full bg-cover bg-no-repeat slide-img">
                         <!--<div class="bg-image-sizer" style="padding-bottom: 110.417%;">-->
                         <img class="img-slider" src="https://staging.pm-instrumentation.com/storage/uploads/images/home-car.jpg" alt="">
                         <!--</div>-->
                     </div>
                 </div>
+                </div>
             </div>
 
                 <!-- hidden content-->
@@ -89,13 +91,15 @@
                         </div>
                     </div>
                 </div>
-                <div class="column overlap-bottom relative slide-mask">
+                <div class="column overlap-bottom relative">
+                    <div class="slide-mask">
                     <div class="bg-image h-full bg-cover bg-no-repeat slide-img">
                         <!--<div class="bg-image-sizer" style="padding-bottom: 110.417%;">-->
                         <img class="img-slider" src="https://www.sciencesetavenir.fr/assets/img/2019/04/10/cover-r4x3w1000-5cadebdd93968-trou-noir-galaxie.jpg" alt="">
 
                         <!--</div>-->
                     </div>
+                    </div>
                 </div>
             </div>
 
@@ -121,12 +125,13 @@
                         </div>
                     </div>
                 </div>
-                <div class="column overlap-bottom relative slide-mask">
+                <div class="column overlap-bottom relative">
+                    <div class="slide-mask">
                     <div class="bg-image h-full bg-cover bg-no-repeat slide-img">
                         <!--<div class="bg-image-sizer" style="padding-bottom: 110.417%;">-->
                         <img class="img-slider" src="https://staging.pm-instrumentation.com/storage/uploads/images/home-car.jpg" alt="">
 
-                        <!--</div>-->
+                        </div>
                     </div>
                 </div>
             </div>
@@ -153,14 +158,25 @@
                         </div>
                     </div>
                 </div>
-                <div class="column overlap-bottom relative slide-mask">
+                <div class="column overlap-bottom relative">
+                    <div class="slide-mask">
                     <div class="bg-image h-full bg-cover bg-no-repeat slide-img">
                         <!--<div class="bg-image-sizer" style="padding-bottom: 110.417%;">-->
                         <img class="img-slider" src="https://www.w3schools.com/w3css/img_lights.jpg" alt="">
-                        <!--</div>--->
+                        </div>-
                     </div>
+
                 </div>
             </div>
+
+            <div class="slider-indicator">
+                <ul class="pl-2v">
+                    <li class="slider-position active-indicator"></li>
+                    <li class="slider-position"></li>
+                    <li class="slider-position"></li>
+                    <li class="slider-position"></li>
+                </ul>
+            </div>
         </div>
 
     </div>

diff --git a/public/_modules/home-slider/slider.js b/public/_modules/home-slider/slider.js
index 0c0221db499469943cb0f6cb33d77bde0a1aa247..6a62c68e27cabf634367e281664bab3be5905963 100644 (file)
--- a/public/_modules/home-slider/slider.js
+++ b/public/_modules/home-slider/slider.js
@@ -10,40 +10,71 @@ let animationDuration = 0; // durée de l'animation
 let delayBetweenAnim = 2000; // delay entre chaque slide
 let mouvement = 0; // valeur en px du déplacement des blocks
 
+let pending = false;
+
 let width = $('.slide-img').width(),
     height = $('.slide-img').height(),
+    imgWidth =$('.img-slider').width(),
     init = 'rect(0px ',
     final = 'px 0px)';
 
 function GotoSlide(nextindex, direction){
 
     let currentSlideIndex = $('.slide').eq(index),
-         nextSlideIndex = $('.slide').eq(nextindex),
+        nextSlideIndex = $('.slide').eq(nextindex),
          currentText = $('.slide-txt').eq(index),
          nextText = $('.slide-txt').eq(nextindex),
-         currentImg = $('.img-slider').eq(index);
+         currentImg = $('.img-slider').eq(index),
+         currentContainerImg = $('.slide-img').eq(index),
+        currentIndicatorIndex = $('.slider-position').eq(index),
+        nextIndicatorIndex = $('.slider-position').eq(nextindex),
+         nextContainerImg = $('.slide-img').eq(nextindex);
 
     console.log(nextindex, direction);
     TweenMax.set('.img-slider',{clip:init + width +'px '+ height+ final, ease: Power3.easeOut});
 
     let tl = new TimelineMax();
+    tl.set(currentSlideIndex,{zIndex: 97});
+    tl.set(nextText,{opacity:1,x:0});
+    tl.to(currentText,0.5,{x:-50*direction,opacity:0});
+
+    // tl.to(currentImg,2,{clip:init +width*(direction)*-1 +'px '+ height+ 'px'+ '-'+imgWidth+'px', ease: Power2.easeInOut,},"-=0.8");
+
+    if(direction === -1){
+        tl.to(currentImg,2,{ clip: init+ imgWidth+'px,'+ height+'px,'+ imgWidth+'px', ease: Power2.easeInOut }, "-=0.8");
+    }else{
+        tl.to(currentImg,2,{ clip: init+ '-'+imgWidth+'px,'+ height+'px,'+ '-'+imgWidth+'px', ease: Power2.easeInOut }, "-=0.8");
+    }
+
+    tl.from(nextText,0.5,{x:80*direction,opacity:0},'-=1.4');
+    tl.from(nextContainerImg,0.8,{x:150*direction,ease: Power2.easeInOut},'-=1.8');
+    tl.to(currentContainerImg,0.8,{x:-250*direction,ease: Power2.easeInOut},"-=1.8");
 
-    tl.set(currentText,{opacity:1});
-    tl.to(currentText,1,{x:-200,opacity:0});
-    tl.set(currentSlideIndex,{zIndex: 999});
-    tl.set(nextText,{opacity:0});
-    tl.to(currentImg,1,{clip:init + '-'+width +'px '+ height+ final, ease: Power1.easeIn},'-=0.5');
-    tl.from(nextText,1,{x:200,opacity:0},'-=0.5');
-    tl.set(currentText,{opacity:1,x:0});
     tl.set(currentSlideIndex,{zIndex: 0});
+    // tl.set(nextContainerImg,{x: 0});
+    tl.set(currentContainerImg,{x:0});
+
+
+    // tl.set(currentText,{opacity:1});
+    // tl.to(currentText,1,{x:-200,opacity:0});
+    // tl.set(currentSlideIndex,{zIndex: 999});
+    // tl.set(nextText,{opacity:0});
+    // tl.to(currentImg,1,{clip:init + '-'+width +'px '+ height+ final, ease: Power1.easeIn},'-=0.5');
+    // tl.from(nextText,1,{x:200,opacity:0},'-=0.5');
+    // tl.set(currentText,{opacity:1,x:0});
+    // tl.set(currentSlideIndex,{zIndex: 0});
+
+
+    nextIndicatorIndex.addClass('active-indicator').eq(nextindex);
+    currentIndicatorIndex.removeClass('active-indicator').eq(index);
 
     setTimeout(function () {
         nextSlideIndex.addClass('active').eq(nextindex);
-    },1000);
+    });
 
     setTimeout(function () {
         currentSlideIndex.removeClass('active').eq(index);
-    },2000);
+    },1000);
 
     index=nextindex;
 }
@@ -53,7 +84,7 @@ $('.arrow').on('click',function () {
         direction = 1;
     }
     else{
-        direction=-1
+        direction=-1;
     }
     let nextindex = (index +direction + slideLength)% slideLength;
 

diff --git a/public/_modules/home-slider/style.css b/public/_modules/home-slider/style.css
index 5f9801a4d7fbefe468d9508d7707758cbbd109e7..215e09c6be759c055480d6a904d6c30dd156b9dc 100644 (file)
--- a/public/_modules/home-slider/style.css
+++ b/public/_modules/home-slider/style.css
@@ -14,11 +14,13 @@
   position: absolute;
   top: 50%;
   left: 2%;
+  z-index: 99;
 }
 .home-arrow-right {
   position: absolute;
   top: 50%;
   right: 2%;
+  z-index: 99;
 }
 .column-wrapper.active {
   display: grid;
@@ -40,3 +42,29 @@
   width: 100%;
   height: 100%;
 }
+.slide-mask {
+  overflow: hidden;
+  height: 100%;
+}
+.slider-indicator {
+  position: absolute;
+  bottom: 60px;
+}
+.slider-indicator ul {
+  display: flex;
+  align-items: center;
+}
+.slider-position {
+  width: 6px;
+  height: 6px;
+  background: #6b7287;
+  border-radius: 50%;
+  margin-right: 10px;
+  transition: all 400ms ease-in-out;
+}
+.active-indicator {
+  width: 10px;
+  height: 10px;
+  background: #fff;
+  transition: all 400ms ease-in-out;
+}

diff --git a/public/_modules/home-slider/style.styl b/public/_modules/home-slider/style.styl
index 1cb263331eda9186278a1c239b0835271c35e465..4c0af9541cc634f029c169cdef07645e7fd58332 100644 (file)
--- a/public/_modules/home-slider/style.styl
+++ b/public/_modules/home-slider/style.styl
@@ -7,7 +7,7 @@ $lightgrey = #F7F8FC
 $darkblue = #152F4E
 $lightblue = #0EAADA
 $verylightgrey =#E7E9F3
-
+$controlSize= 60px;
 *
   padding: 0
   box-sizing: border-box !important
@@ -21,9 +21,45 @@ $verylightgrey =#E7E9F3
   position: absolute;
   top: 50%;
   left: 2%;
+  z-index 99
 .home-arrow-right
   position: absolute;
   top: 50%;
   right: 2%;
+  z-index 99
 .column-wrapper.active
   display grid
+.slide-img
+  position: relative
+.img-slider
+  position: absolute
+  width 100%
+  height 100%
+.slider
+  width: 100%
+  position relative
+  height 80vh
+.slide
+  width: 100%
+  height: 100%
+.slide-mask
+  overflow hidden
+  height 100%
+.slider-indicator
+  position absolute
+  bottom 60px
+  ul
+    display flex
+    align-items center
+.slider-position
+  width: 6px
+  height 6px
+  background: #6B7287
+  border-radius 50%
+  margin-right: 10px
+  transition all 400ms ease-in-out
+.active-indicator
+  width: 10px
+  height 10px
+  background: white
+  transition all 400ms ease-in-out
\ No newline at end of file