wip #2747 @7

diff --git a/public/_modules/home-slider/index.html b/public/_modules/home-slider/index.html
index d9b492b266cd3cf781eda6d7287f151b7964bd6f..b007235572e18ee330bc694ee2a0cb0482cec58a 100644 (file)
--- a/public/_modules/home-slider/index.html
+++ b/public/_modules/home-slider/index.html
@@ -39,7 +39,7 @@
         <div class="slider relative">
 
             <div data-slide="1" class="column-wrapper absolute slide active hide ">
-                <div class="column pt-2v pr-1v pb-2v slide-txt">
+                <div class="column slide-content pt-2v pr-1v pb-2v slide-txt">
                     <div class="text-block  text-block-default-padding pl-2v">
                         <h2 class="h1 text-inherit">Wheel Force Transducer</h2>
                         <div class="text-block-body">
@@ -58,7 +58,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="column overlap-bottom relative">
+                <div class="column slide-content 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%;">-->
@@ -72,7 +72,7 @@
                 <!-- hidden content-->
 
                 <div data-slide="2" class="column-wrapper absolute slide hide ">
-                <div class="column pt-2v pr-1v pb-2v slide-txt">
+                <div class="column slide-content pt-2v pr-1v pb-2v slide-txt">
                     <div class="text-block  text-block-default-padding pl-2v">
                         <h2 class="h1 text-inherit">slide suivante</h2>
                         <div class="text-block-body">
@@ -91,7 +91,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="column overlap-bottom relative">
+                <div class="column slide-content 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%;">-->
@@ -104,7 +104,7 @@
             </div>
 
                 <div data-slide="3" class="column-wrapper absolute slide hide">
-                <div class="column pt-2v pr-1v pb-2v slide-txt">
+                <div class="column slide-content pt-2v pr-1v pb-2v slide-txt">
                     <div class="text-block  text-block-default-padding pl-2v">
                         <h2 class="h1 text-inherit">Lorem ipsum</h2>
                         <div class="text-block-body">
@@ -125,7 +125,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="column overlap-bottom relative">
+                <div class="column slide-content 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%;">-->
@@ -136,8 +136,8 @@
                 </div>
             </div>
 
-                <div data-slide="4" class="column-wrapper absolute slide hide">
-                <div class="column pt-2v pr-1v pb-2v slide-txt">
+            <div data-slide="4" class="column-wrapper absolute slide hide">
+                <div class="column slide-content pt-2v pr-1v pb-2v slide-txt">
                     <div class="text-block  text-block-default-padding pl-2v">
                         <h2 class="h1 text-inherit">Lorrefdcem ipsfdcum</h2>
                         <div class="text-block-body">
@@ -158,14 +158,13 @@
                         </div>
                     </div>
                 </div>
-                <div class="column overlap-bottom relative">
+                <div class="column slide-content 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>
 

diff --git a/public/_modules/home-slider/slider.js b/public/_modules/home-slider/slider.js
index 96afe44932d83ea2060a9484370a291e1a301e4a..056788bc41072c77fd900e138fa19b8306872fcc 100644 (file)
--- a/public/_modules/home-slider/slider.js
+++ b/public/_modules/home-slider/slider.js
@@ -3,42 +3,60 @@
 let index = 0,
     slideLength = $(".slide").length,
     prevBtn = $(".home-arrow-left"),
-    nextBtn = $(".home-arrow-right");
+    nextBtn = $(".home-arrow-right"),
+    Delay = 1,
+    isRunning = false;
 
-let slides = document.querySelectorAll('.slide');
-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 Delay = 1;
-let isRunning = false;
-// Get on screen image
-let screenImage = $(".img-slider");
-
-// Create new offscreen image to test
-let theImage = new Image();
-theImage.src = screenImage.attr("src");
+let getImg = new Image();
+    getImg.src = $('.img-slider').attr("src");
 
 let img = document.getElementsByClassName('.img-slider'),
-    width = $('.slide-img').width(),
+    imgHeight = getImg.naturalHeight,
+    imgWidth = getImg.naturalWidth;
+
+let width = $('.slide-img').width(),
     height = $('.slide-img').height(),
-    imgHeight = theImage.height,
-    imgWidth = theImage.width,
     init = 'rect(0px ',
     final = 'px 0px)';
 
+    // $(".slide-img").css('clip', 'rect(0px, '+width +'px,'+height +' px, 0px)');
+    console.log('SANS resize '+width,height);
+
 $('.img-slider').each(function () {
-   $(this).css({'width':imgWidth, 'height':imgHeight});
+    getImg = $(this).attr("src");
+    console.log(getImg);
+
+    let widthFactor= width / imgWidth,  // coef multiplicateur width
+        heightFactor=  height / imgHeight ; // coef multiplicateur height
+
+    console.log(widthFactor,heightFactor);
+    $(this).css({'width':imgWidth*Math.max(widthFactor, heightFactor), 'height':imgHeight*Math.max(widthFactor, heightFactor)});
+
+});
+
+$(window).on('orientationchange',function () {
+    resize();
+    setTimeout(function () {
+        resize();
+    },1000);
+});
+$(window).on('resize',function () {
+    resize();
 });
+resize();
 
-// $('.img-slider').css({'width':imgWidth, 'height':imgHeight});
-console.log(imgWidth,imgHeight);
-console.log('Container width: '+width+' ---- Container height: '+height);
+// // RESIZE
+function resize() {
 
+    let width = $('.slide-img').eq(index).width(),
+        height = $('.slide-img').eq(index).height();
 
+    console.log(width, height);
+    // $('.slide-img').css({'width': width ,'height':height});
 
+}
 
 function GotoSlide(nextindex, direction){
-
     if (!isRunning){
         isRunning = true;
 
@@ -47,33 +65,21 @@ function GotoSlide(nextindex, direction){
          currentText = $('.slide-txt').eq(index),
          nextText = $('.slide-txt').eq(nextindex),
          currentImg = $('.img-slider').eq(index),
+         nextImg = $('.img-slider').eq(nextindex),
          currentContainerImg = $('.slide-img').eq(index),
         currentIndicatorIndex = $('.slider-position').eq(index),
         nextIndicatorIndex = $('.slider-position').eq(nextindex),
          nextContainerImg = $('.slide-img').eq(nextindex);
 
-        $(window).resize(function () {
-
-            let   width = $('.slide-img').width(),
-                height = $('.slide-img').height(),
-                imgHeight = theImage.height,
-                imgWidth = theImage.width;
-
-            TweenMax.set('.img-slider',{clip:init + imgWidth +'px '+ imgHeight+ final, ease: Power3.easeOut});
-
-            console.log('%c Image width: '+imgWidth+' ---- image height: '+imgHeight,'background: #222; color: #bada55');
-            console.log('Container width: '+width+' ---- Container height: '+height);
-        });
-
-    console.log(nextindex, direction);
-    TweenMax.set('.img-slider',{clip:init + width +'px '+ height+ final, ease: Power3.easeOut});
+        console.log(nextindex, direction);
+        TweenMax.set('.slide-img',{clip:init + width +'px '+ height+ final, ease: Power3.easeOut});
 
     let tl = new TimelineMax({onComplete: isSlideRunning});
     tl.set(currentSlideIndex,{zIndex: 97});
     tl.set(nextText,{opacity:1,x:0});
     tl.to(currentText,0.5*Delay,{x:-80*direction,opacity:0, ease: Power1.easeOut});
 
-    tl.to(currentImg,2*Delay,{ clip: init+ (direction)*-1*imgWidth+'px,'+ height+'px,'+ (direction)*-1*imgWidth+'px', ease: Power2.easeInOut }, "-="+0.8*Delay);
+    tl.to(currentContainerImg,2*Delay,{ clip: init+ (direction)*-1*imgWidth+'px,'+ height+'px,'+ (direction)*-1*imgWidth+'px', ease: Power2.easeInOut }, "-="+0.8*Delay);
 
     tl.from(nextText,0.5*Delay,{x:80*direction,opacity:0,ease: Power1.easeOut},'-='+1.2*Delay);
 

diff --git a/public/_modules/home-slider/style.css b/public/_modules/home-slider/style.css
index 7619fcc67806a3381fd94383d4d307290869dff8..8111b733df8370e4c0932ff340dc6048eb0d6fb1 100644 (file)
--- a/public/_modules/home-slider/style.css
+++ b/public/_modules/home-slider/style.css
@@ -32,6 +32,8 @@
 }
 .img-slider {
   position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
 }
 .slider {
   width: 100%;
@@ -79,3 +81,8 @@
 img {
   max-width: unset !important;
 }
+@media only screen and (max-width: 768px) {
+  .slide-content.column {
+    margin-bottom: -10vw !important;
+  }
+}

diff --git a/public/_modules/home-slider/style.styl b/public/_modules/home-slider/style.styl
index e0a1d2994531417cebc2bb4e8e81800c8693e0d0..b7256cb4db400ce2d3906d519fa01c6b00247039 100644 (file)
--- a/public/_modules/home-slider/style.styl
+++ b/public/_modules/home-slider/style.styl
@@ -35,6 +35,8 @@ $controlSize= 60px;
   overflow: hidden;
 .img-slider
   position: absolute
+  left: 50%
+  transform: translateX(-50%)
   //width 100%
 //  //height 100%
 .slider
@@ -75,4 +77,8 @@ $controlSize= 60px;
     grid-auto-columns: 1fr;
     grid-auto-flow: column;
 img
-  max-width unset!important
\ No newline at end of file
+  max-width unset!important
+
+.slide-content.column
+  @media only screen and (max-width: 768px)
+    margin-bottom: -10vw!important