Un grand merci !!!
J'ai encore une toute petite question à vous demander, Il y a un truc dans ce code qui ralentit l' ajout de class slide--current et je n'arrive pas le modifier pour que le remove et l'ajout de class slide-current se fasse directement :
Je pense que c'est au niveau du 'begin+=' , 'OnStart' et 'OnComplete'
{
const getRandomNumber = (min, max) => (Math.random() * (max - min) + min);
const body = document.body;
const winsize = {width: window.innerWidth };
class Slide {
constructor(el) {
this.DOM = {el: el};
this.DOM.img = this.DOM.el.querySelector('.slide__image');
this.DOM.title = this.DOM.el.querySelector('.slide__animate');
charming(this.DOM.title);
this.DOM.titleLetters = Array.from(this.DOM.title.querySelectorAll('span'));
this.titleLettersTotal = this.DOM.titleLetters.length;
}
}
class Slideshow {
constructor(el) {
this.DOM = {el: el};
this.slides = [];
Array.from(this.DOM.el.querySelectorAll('.slide')).forEach(slide => this.slides.push(new Slide(slide)));
this.slidesTotal = this.slides.length;
this.current = 0;
this.slides[this.current].DOM.el.classList.add('slide--current');
this.navigationCtrls = {
next: this.DOM.el.querySelector('.Nav > .Nav__button--next'),
prev: this.DOM.el.querySelector('.Nav > .Nav__button--previous')
};
this.initEvents();
const next = this.current < this.slidesTotal - 1 ? this.current + 1 : 0;
const previous = this.current > 0 ? this.current - 1 : this.slidesTotal - 1;
const previousSlide = this.slides[previous];
const nextSlide = this.slides[next];
$('.Nav > .Nav__button--previous span').text(function(){
var length = 16,
text = $(previousSlide.DOM.el).find('.slide__title').text();
return text.length > length ? text.substring(0, length - 4) + "..." : text;
});
$('.Nav > .Nav__button--next span').text(function(){
var length = 16,
text = $(nextSlide.DOM.el).find('.slide__title').text();
return text.length > length ? text.substring(0, length - 4) + "..." : text;
});
}
initEvents() {
this.navigationCtrls.next.addEventListener('click', () => this.navigate('next'));
this.navigationCtrls.prev.addEventListener('click', () => this.navigate('prev'));
document.addEventListener('keydown', (ev) => {
const keyCode = ev.keyCode || ev.which;
if ( keyCode === 39 ) {
this.navigate('next');
}
else if ( keyCode === 37 ) {
this.navigate('prev');
}
});
}
navigate(direction = 'next') {
if ( this.isAnimating ) return;
this.isAnimating = true;
const currentSlide = this.slides[this.current];
this.current = direction === 'next' ? this.current < this.slidesTotal - 1 ? this.current+1 : 0 :
this.current > 0 ? this.current-1 : this.slidesTotal - 1;
const upcomingSlide = this.slides[this.current];
const next = this.current < this.slidesTotal - 1 ? this.current + 1 : 0;
const previous = this.current > 0 ? this.current - 1 : this.slidesTotal - 1;
// The elements we will animate.
const currentImg = currentSlide.DOM.img;
const currentTitle = currentSlide.DOM.title;
const currentTitleLetters = currentSlide.DOM.titleLetters;
const currentTitleLettersTotal = currentSlide.titleLettersTotal;
const upcomingImg = upcomingSlide.DOM.img;
const upcomingTitle = upcomingSlide.DOM.title;
this.tl = new TimelineMax({
onStart: () => {
upcomingSlide.DOM.el.classList.add('slide--current');
const previousSlide = this.slides[previous];
const nextSlide = this.slides[next];
$('.Nav > .Nav__button--previous span').text(function(){
var length = 16,
text = $(previousSlide.DOM.el).find('.slide__title').text();
return text.length > length ? text.substring(0, length - 4) + "..." : text;
});
$('.Nav > .Nav__button--next span').text(function(){
var length = 16,
text = $(nextSlide.DOM.el).find('.slide__title').text();
return text.length > length ? text.substring(0, length - 4) + "..." : text;
});
$('.wrapper_slide_title > .TypeService').addClass('TypeService--hidden');
$('.wrapper_slide_title > .link_project').addClass('link_project--hidden');
},
onComplete: () => {
currentSlide.DOM.el.classList.remove('slide--current');
this.isAnimating = false;
$('.wrapper_slide_title > .TypeService').removeClass('TypeService--hidden');
$('.wrapper_slide_title > .link_project').removeClass('link_project--hidden');
}
});
this.tl
.set(currentImg, {transformOrigin: direction === 'next' ? '100% 50%' : '0% 50%'})
.set(upcomingTitle, {x: direction === 'next' ? 600 : -600, y: 0, opacity: 0})
.to(currentImg, 0.3, {
ease: Quad.easeOut,
scaleX: 2.1,
scaleY: 1.1,
opacity: 1
}, 'begin')
.to(currentImg, 0.8, {
ease: Expo.easeOut,
x: direction === 'next' ? -1*winsize.width : winsize.width
}, 'begin+=0.25')
.to(currentTitle, 0.5, {
ease: Quad.easeOut,
x: direction === 'next' ? 2 : -2,
y: 0,
repeat: 2
})
.staggerTo(currentTitleLetters.sort((a,b) => 0.3 - Math.random()), 0.2, {
ease: Expo.easeOut,
cycle: {
x: () => direction === 'next' ? getRandomNumber(-60, -30) : getRandomNumber(60, 120),
y: () => getRandomNumber(-30, 30),
},
opacity: 0
}, 0.6/currentTitleLettersTotal, 'begin+=0.15')
.set(upcomingImg, {
transformOrigin: direction === 'next' ? '0% 50%' : '100% 50%',
x: direction === 'next' ? winsize.width : -1*winsize.width,
scaleX: 2,
scaleY: 1,
opacity: 1
}, 'begin+=0.25')
.to(upcomingImg, 0.8, {
ease: Expo.easeOut,
x: 0
}, 'begin+=0.25')
.to(upcomingImg, 1, {
ease: Elastic.easeOut.config(1,0.8),
scaleX: 1,
scaleY: 1,
opacity: 1
}, 'begin+=0.35')
.to(upcomingTitle, 1, {
ease: Elastic.easeOut.config(1,0.8),
x: 0,
opacity: 1
}, 'begin+=0.45')
.set(currentTitleLetters, {x: 0, y: 0, opacity: 1});
}
}
new Slideshow(document.querySelector('.slideshow'));
}
Modifié par newger (05 Jan 2019 - 13:58)