<div class="mobile-bg" style="background-image: url(img/home-car.jpg)"></div>
- <div class="text-block text-block-default-padding pl-2v">
+ <div class="text-block txt text-block-default-padding pl-2v">
<h2 class="h1 text-inherit">Wheel Force Transducer</h2>
<div class="text-block-body">
<p>
<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="">
+ <img class="img-slider" draggable="false" src="https://staging.pm-instrumentation.com/storage/uploads/images/home-car.jpg" alt="">
<!--</div>-->
</div>
</div>
<div class="mobile-bg" style="background-image: url(https://www.sciencesetavenir.fr/assets/img/2019/04/10/cover-r4x3w1000-5cadebdd93968-trou-noir-galaxie.jpg)"></div>
- <div class="text-block text-block-default-padding pl-2v">
+ <div class="text-block txt text-block-default-padding pl-2v">
<h2 class="h1 text-inherit">slide suivante</h2>
<div class="text-block-body">
<p>
<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="">
+ <img class="img-slider" draggable="false" src="https://www.sciencesetavenir.fr/assets/img/2019/04/10/cover-r4x3w1000-5cadebdd93968-trou-noir-galaxie.jpg" alt="">
<!--</div>-->
</div>
<div class="mobile-bg" style="background-image: url(https://staging.pm-instrumentation.com/storage/uploads/images/home-car.jpg)"></div>
- <div class="text-block text-block-default-padding pl-2v">
+ <div class="text-block txt text-block-default-padding pl-2v">
<h2 class="h1 text-inherit">Lorem ipsum</h2>
<div class="text-block-body">
<p>
<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="">
+ <img class="img-slider" draggable="false" src="https://staging.pm-instrumentation.com/storage/uploads/images/home-car.jpg" alt="">
</div>
</div>
<div class="mobile-bg" style="background-image: url(https://www.w3schools.com/w3css/img_lights.jpg)"></div>
- <div class="text-block text-block-default-padding pl-2v">
+ <div class="text-block txt text-block-default-padding pl-2v">
<h2 class="h1 text-inherit">Lorrefdcem ipsfdcum</h2>
<div class="text-block-body">
<p>
<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="">
+ <img class="img-slider" draggable="false" src="https://www.w3schools.com/w3css/img_lights.jpg" alt="">
</div>
</div>
</div>
<script src="TweenMax.min.js"></script>
<script src="swipe-listener.min.js"></script>
<script src="hammer.js"></script>
-<script src="slider.js"></script>
+<script src="slider-jq.js"></script>
+<!--<script src="slider.js"></script>-->
<!--<script src="../../js/app.js"></script>-->
</body>
</html>
\ No newline at end of file
--- /dev/null
+// jshint ignore: start
+
+(function ($) {
+ function JQPMISlide(element) {
+ this.element = element;
+ this.hammertime = new Hammer(this.myElement);
+ this.index = 0;
+ this.slideLength = this.element.find(".slide").length;
+
+ this.prevBtn = this.element.find(".home-arrow-left");
+ this.nextBtn = this.element.find(".home-arrow-right");
+ this.Delay = 1;
+ this.getImg = new Image();
+ this.getImg.src = this.element.find('.img-slider').attr("src");
+
+ this.img = document.getElementsByClassName('.img-slider');
+ this.imgWidth = this.getImg.naturalWidth;
+
+ this.width = this.element.find('.slide-img').width(); // --> clip container width
+ this.height = this.element.find('.slide-img').height(); // --> clip container height
+ this.init = 'rect(0px ';
+ this.final = 'px 0px)';
+
+ this.container = document.querySelector('.slider');
+ this.myElement = document.getElementById('myElement');
+
+ this.hammertime.get('swipe').set({ enable: true });
+
+ this.initt();
+ };
+
+ JQPMISlide.prototype = {
+ initt: function () {
+ this.initEvents();
+ },
+
+ initEvents:function(){
+ let $this=this;
+ $(window).on('orientationchange',function () {
+ $this.resize();
+ setTimeout(function () {
+ $this.resize();
+ },500);
+ });
+ $(window).on('resize',function () {
+ $this.resize();
+ });
+ this.resize();
+ this.enableArrows();
+ this.initSwipeEvent();
+
+ },
+
+ resize:function() {
+ let $this=this;
+ this.element.find('.img-slider').each(function () {
+ let width = $this.element.find('.slide-img').eq($this.index).width(),
+ height = $this.element.find('.slide-img').eq($this.index).height();
+
+ let naturalHeight = $(this).prop('naturalHeight'),
+ naturalWidth = $(this).prop('naturalWidth');
+
+ let getAllImg = new Image();
+ getAllImg.src = $(this).attr("src");
+
+ let widthFactor = width / naturalWidth, // coef multiplicateur width
+ heightFactor = height / naturalHeight ; // coef multiplicateur height
+
+ TweenMax.set($(this),{width:naturalWidth*Math.max(widthFactor, heightFactor), height:naturalHeight*Math.max(widthFactor, heightFactor)});
+ });
+
+ $('.slide-img').each(function () {
+ let width = $(this).width(), // --> container width (clip container)
+ height = $(this).height(); // --> container height (clip container)
+
+ TweenMax.set($(this),{clip:$this.init + width +'px '+ height+ $this.final, ease: Power3.easeOut}); // on resize apply new width/height to clip container
+ });
+ },
+
+ goToSlide: function(nextindex,direction){
+ this.width = this.element.find('.slide-img').eq(this.index).width();
+ this.height = this.element.find('.slide-img').eq(this.index).height();
+
+ this.currentSlideIndex = this.element.find('.slide').eq(this.index);
+ this.nextSlideIndex = this.element.find('.slide').eq(nextindex);
+ this.currentTextContainer = this.element.find('.slide-txt').eq(this.index);
+ this.nextTextContainer = this.element.find('.slide-txt').eq(nextindex);
+ this.currentContainerImg = this.element.find('.slide-img').eq(this.index);
+ this.currentIndicatorIndex = this.element.find('.slider-position').eq(this.index);
+ this.currentTextBlock = this.element.find('.txt').eq(this.index);
+ this.nextTextBlock = this.element.find('.txt').eq(nextindex);
+ this.nextIndicatorIndex = this.element.find('.slider-position').eq(nextindex);
+ this.nextContainerImg = this.element.find('.slide-img').eq(nextindex);
+
+ this.hammertime.get('swipe').set({ enable: false }); // disable swipe when animation is running
+
+ this.finishAnimation = function () { // when animation is finished this function will be executed
+
+ this.hammertime.get('swipe').set({ enable: true }); // swipe functionality is now reactivate
+ this.currentSlideIndex.removeClass('active').eq(this.index);
+
+ this.enableArrows(); // when animation is finished we reactivate click event
+ TweenMax.set(this.element.find('.slide-img'),{clip:this.init + this.width +'px '+ this.height+ this.final, ease: Power3.easeOut});
+
+ };
+
+ if($(window).width() > 768){
+ TweenMax.set(this.element.find('.slide-img'),{clip:this.init + this.width +'px '+ this.height+ this.final, ease: Power3.easeOut});
+
+ let tl = new TimelineMax({onComplete: this.finishAnimation});
+
+ tl.set(this.currentSlideIndex,{zIndex: 97});
+ tl.set(this.nextTextContainer,{opacity:1,x:0});
+ tl.to(this.currentTextContainer,0.5*this.Delay,{x:-80*direction,opacity:0, ease: Power1.easeOut});
+ tl.to(this.currentContainerImg,2*this.Delay,{ clip: init+ (direction)*-1*this.imgWidth+'px,'+ this.height+'px,'+ (direction)*-1*imgWidth+'px', ease: Power2.easeInOut }, "-="+0.8*this.Delay);
+
+ tl.from(this.nextTextContainer,0.5*this.Delay,{x:80*direction,opacity:0,ease: Power1.easeOut},'-='+1.2*this.Delay);
+
+ tl.from(this.nextContainerImg,1.5*this.Delay,{x:150*direction,ease: Power2.easeInOut},'-='+2.3*this.Delay); // initial delay value 1.5s
+ tl.to(this.currentContainerImg,1.5*this.Delay,{x:-250*direction,ease: Power2.easeInOut},"-="+1.9*this.Delay); // initial delay value 1.5s
+ tl.set(this.currentSlideIndex,{zIndex: 0});
+ tl.set(this.currentContainerImg,{x:0});
+
+ }
+ else{
+ let tl2 = new TimelineMax({onComplete: this.finishAnimation});
+
+ this.percent = 100*direction;
+ this.negativePercent = -100*direction;
+
+ tl2.set(this.currentSlideIndex,{transform: 'translateX(0px)',opacity:1});
+ tl2.set(this.nextSlideIndex,{transform: 'translateX(0px)',opacity:1});
+ tl2.set(this.currentTextContainer,{transform: 'translateX(0px)',opacity:1});
+ tl2.set(this.nextTextContainer,{transform: 'translateX(0px)',opacity:1});
+
+ tl2.to(this.currentSlideIndex,0.7,{transform: 'translateX('+ (this.percent+'%') +')',ease: Power1.easeOut});
+ tl2.to(this.currentTextBlock,0.7,{opacity:0},'-=0.9');
+ tl2.from(this.nextSlideIndex,0.7,{transform: 'translateX('+ (this.negativePercent+'%') +')',ease: Power1.easeOut},"-=0.7");
+ tl2.from(this.nextTextBlock,0.7,{opacity:0,x:-100*direction});
+
+ // reset all block style
+ tl2.set(this.currentTextBlock,{opacity:1});
+ tl2.set(this.currentSlideIndex,{transform: 'translateX(0px)',opacity:1});
+ tl2.set(this.nextSlideIndex,{transform: 'translateX(0px)',opacity:1});
+ tl2.set(this.currentTextContainer,{transform: 'translateX(0px)',opacity:1});
+ tl2.set(this.nextTextContainer,{transform: 'translateX(0px)',opacity:1});
+
+ }
+ this.nextIndicatorIndex.addClass('active-indicator').eq(nextindex);
+ this.currentIndicatorIndex.removeClass('active-indicator').eq(this.index);
+
+ this.nextSlideIndex.addClass('active').eq(nextindex);
+ this.disableArrows(); // disable click on arrows until animation finishes
+ this.index=nextindex;
+
+ },
+
+ nextSlide: function () {
+ this.direction = 1;
+
+ this.nextindex = (this.index + this.direction + this.slideLength) % this.slideLength;
+ this.goToSlide(this.nextindex, this.direction);
+ },
+
+ initSwipeEvent: function (){
+ this.Hammer().on('swiperight', function() {
+ this.prevSlide();
+ });
+ this.hammertime.on('swipeleft', function() {
+ this.nextSlide();
+ });
+ },
+ prevSlide: function () {
+ this.direction = -1;
+
+ this.nextindex = (this.index + this.direction + this.slideLength) % this.slideLength;
+ this.goToSlide(this.nextindex, this.direction);
+ },
+
+ enableArrows: function() {
+ this.element.find('.arrow.next').on('click', this.nextSlide);
+ this.element.find('.arrow.prev').on('click', this.prevSlide);
+ },
+
+ disableArrows: function() {
+ this.element.find('.arrow.next').off();
+ this.element.find('.arrow.prev').off();
+ }
+ };
+
+ jQuery.fn.PMISlide = function () {
+ return this.each(function () {
+ var $this = $(this);
+ if ($(this).data('PMISlide') === undefined) {
+ $(this).data('PMISlide', new JQPMISlide($this));
+ }
+ })
+ };
+})(jQuery);
+
+$(function () {
+ $("#myElement").PMISlide();
+});
\ No newline at end of file
getImg.src = $('.img-slider').attr("src");
let img = document.getElementsByClassName('.img-slider'),
- imgHeight = getImg.naturalHeight,
imgWidth = getImg.naturalWidth;
- // console.log('valeur initial img => '+imgWidth,imgHeight);
let width = $('.slide-img').width(), // --> clip container width
height = $('.slide-img').height(), // --> clip container height
let container = document.querySelector('.slider');
let listener = SwipeListener(container);
+let myElement = document.getElementById('myElement');
+let hammertime = new Hammer(myElement);
-resize();
-
-
-
-var myElement = document.getElementById('myElement');
-
-var hammertime = new Hammer(myElement);
hammertime.get('swipe').set({ enable: true });
-hammertime.on('swipeleft', function(ev) {
- prevSlide();
-});
-
-hammertime.on('swiperight', function(ev) {
- nextSlide();
-});
-
+function swipeEvent(){
+ hammertime.on('swiperight', function() {
+ prevSlide();
+ });
+ hammertime.on('swipeleft', function() {
+ nextSlide();
+ });
+}
+resize();
+swipeEvent();
+// ******* RESIZE EVENT ******* //
$(window).on('orientationchange',function () {
resize();
setTimeout(function () {
});
$(window).on('resize',function () {
resize();
-
});
-// RESIZE
+// ******* RESIZE EVENT ******* //
+
+// RESIZE FUNCTION
+
function resize() {
$('.img-slider').each(function () {
let width = $('.slide-img').eq(index).width(),
let getAllImg = new Image();
getAllImg.src = $(this).attr("src");
- // console.log(getAllImg); // --> return toutes les img avec leur attributs src
-
- // console.log('img natural values: '+naturalWidth,naturalHeight);
-
let widthFactor = width / naturalWidth, // coef multiplicateur width
heightFactor = height / naturalHeight ; // coef multiplicateur height
}
function GotoSlide(nextindex, direction){
- let width = $('.slide-img').eq(index).width(),
- height = $('.slide-img').eq(index).height();
-
- let currentSlideIndex = $('.slide').eq(index),
- nextSlideIndex = $('.slide').eq(nextindex),
- 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);
+ let width = $('.slide-img').eq(index).width(),
+ height = $('.slide-img').eq(index).height();
+
+ let currentSlideIndex = $('.slide').eq(index),
+ nextSlideIndex = $('.slide').eq(nextindex),
+ currentTextContainer = $('.slide-txt').eq(index),
+ nextTextContainer = $('.slide-txt').eq(nextindex),
+ currentContainerImg = $('.slide-img').eq(index),
+ currentIndicatorIndex = $('.slider-position').eq(index),
+ currentTextBlock = $('.txt').eq(index),
+ nextTextBlock = $('.txt').eq(nextindex),
+ nextIndicatorIndex = $('.slider-position').eq(nextindex),
+ nextContainerImg = $('.slide-img').eq(nextindex);
hammertime.get('swipe').set({ enable: false }); // disable swipe when animation is running
- console.log( hammertime.get('swipe').set({ enable: false }));
- let finishAnimation = function () {
+ let finishAnimation = function () { // when animation is finished this function will be executed
- hammertime.get('swipe').set({ enable: true });
+ hammertime.get('swipe').set({ enable: true }); // swipe functionality is now reactivate
+ currentSlideIndex.removeClass('active').eq(index);
+ enableArrows(); // when animation is finished we reactivate click event
+ TweenMax.set($('.slide-img'),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut});
- currentSlideIndex.removeClass('active').eq(index);
+ };
- enableArrows(); // when animation is finished we reactivate click event
- TweenMax.set($('.slide-img'),{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});
-
- // TODO : remove negative delay
- // negative delay slow the end of this timeline
+ // if window width superior 768px --> we launch desktop animation
+ if($(window).width() > 768){
+ console.log(nextindex, direction);
+ TweenMax.set($('.slide-img'),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut});
let tl = new TimelineMax({onComplete: finishAnimation});
- // tl.set($('.slide-img'),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut});
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.set(nextTextContainer,{opacity:1,x:0});
+ tl.to(currentTextContainer,0.5*Delay,{x:-80*direction,opacity:0, ease: Power1.easeOut});
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);
+ tl.from(nextTextContainer,0.5*Delay,{x:80*direction,opacity:0,ease: Power1.easeOut},'-='+1.2*Delay);
tl.from(nextContainerImg,1.5*Delay,{x:150*direction,ease: Power2.easeInOut},'-='+2.3*Delay); // initial delay value 1.5s
tl.to(currentContainerImg,1.5*Delay,{x:-250*direction,ease: Power2.easeInOut},"-="+1.9*Delay); // initial delay value 1.5s
tl.set(currentSlideIndex,{zIndex: 0});
tl.set(currentContainerImg,{x:0});
- nextIndicatorIndex.addClass('active-indicator').eq(nextindex);
- currentIndicatorIndex.removeClass('active-indicator').eq(index);
+ }
+ // if window width inferior or equal to 768px --> we launch mobile animation
+ else{
+ let tl2 = new TimelineMax({onComplete: finishAnimation});
+
+ let percent = 100*direction;
+ let negativePercent = -100*direction;
+
+ console.log(nextindex, direction);
+ tl2.set(currentSlideIndex,{transform: 'translateX(0px)',opacity:1});
+ tl2.set(nextSlideIndex,{transform: 'translateX(0px)',opacity:1});
+ tl2.set(currentTextContainer,{transform: 'translateX(0px)',opacity:1});
+ tl2.set(nextTextContainer,{transform: 'translateX(0px)',opacity:1});
- nextSlideIndex.addClass('active').eq(nextindex);
+ tl2.to(currentSlideIndex,0.7,{transform: 'translateX('+ (percent+'%') +')',ease: Power1.easeOut});
+ tl2.to(currentTextBlock,0.7,{opacity:0},'-=0.9');
+ tl2.from(nextSlideIndex,0.7,{transform: 'translateX('+ (negativePercent+'%') +')',ease: Power1.easeOut},"-=0.7");
+ tl2.from(nextTextBlock,0.7,{opacity:0,x:-100*direction});
- disableArrows(); // disable click on arrows until animation finishes
+ // reset all block style
+ tl2.set(currentTextBlock,{opacity:1});
+ tl2.set(currentSlideIndex,{transform: 'translateX(0px)',opacity:1});
+ tl2.set(nextSlideIndex,{transform: 'translateX(0px)',opacity:1});
+ tl2.set(currentTextContainer,{transform: 'translateX(0px)',opacity:1});
+ tl2.set(nextTextContainer,{transform: 'translateX(0px)',opacity:1});
+ }
+
+ nextIndicatorIndex.addClass('active-indicator').eq(nextindex);
+ currentIndicatorIndex.removeClass('active-indicator').eq(index);
+
+ nextSlideIndex.addClass('active').eq(nextindex);
+ disableArrows(); // disable click on arrows until animation finishes
index=nextindex;
}
$('.arrow.prev').off();
}
- enableArrows();
-
-// TODO : 1 --> change the frequency of the swipe: we can swipe when the animation Timeline is over // update : works on desktop, bug with mobile devices
-
-// TODO : BUG --> si on swipe (next, prev, next) on ne voit plus l'image
-
-// function swiper(){
-// container.addEventListener('swipe', function (e) {
-// let directions = e.detail.directions;
-//
-// // listener.on();
-// if (directions.left) {
-// prevSlide();
-// }
-//
-// if (directions.right) {
-// nextSlide();
-// }
-// });
-// }
-//
-// swiper();
-
+ enableArrows();
\ No newline at end of file
left: 2%;
z-index: 99;
}
+@media (max-width: 769px) {
+ .home-arrow-left {
+ top: 88.5%;
+ left: 5%;
+ }
+}
.home-arrow-right {
position: absolute;
top: 50%;
right: 2%;
z-index: 99;
}
+@media (max-width: 769px) {
+ .home-arrow-right {
+ top: 88.5%;
+ right: 5%;
+ }
+}
.column-wrapper.active {
display: grid;
}
position: relative;
height: 80vh;
}
+@media (max-width: 769px) {
+ .slider {
+ overflow: hidden;
+ }
+}
.slide {
width: 100%;
height: 100%;
top: 50%;
left: 2%;
z-index 99
+ @media (max-width 769px)
+ top: 88.5%
+ left 5%
.home-arrow-right
position: absolute;
top: 50%;
right: 2%;
z-index 99
+ @media (max-width 769px)
+ top: 88.5%
+ right 5%
.column-wrapper.active
display grid
.slide-img
width: 100%
position relative
height 80vh
+ @media (max-width 769px)
+ overflow hidden
.slide
width: 100%
height: 100%
projects / pmi.git / commitdiff