From: nael Date: Tue, 9 Jul 2019 16:30:06 +0000 (+0200) Subject: wip #2747 @7 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=7d74bb2e1a5adfdb1710730b0feb54af617c0497;p=pmi.git wip #2747 @7 --- diff --git a/package.json b/package.json index 7b1f9a4..6310d35 100644 --- 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 498db69..d9b492b 100644 --- a/public/_modules/home-slider/index.html +++ b/public/_modules/home-slider/index.html @@ -58,13 +58,15 @@ -
+
+
+
@@ -89,13 +91,15 @@ -
+
+
+
@@ -121,12 +125,13 @@ -
+
+
- +
@@ -153,14 +158,25 @@ -
+
+
- +
-
+
+ +
+ +
diff --git a/public/_modules/home-slider/slider.js b/public/_modules/home-slider/slider.js index 0c0221d..6a62c68 100644 --- 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 5f9801a..215e09c 100644 --- 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 1cb2633..4c0af95 100644 --- 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