gsap滑块轮播图

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

let images = document.querySelectorAll('.image');
const root = document.documentElement;
const elements = ['.image-1', '.image-2', '.image-3', '.image-4', '.image-5']
const totalImages = images.length;

let currentImage = 1;
let nextImage = currentImage + 1;
let upcomingImage =  nextImage + 1;
 
function filterActiveImages(image1, image2) {
  const filteredResult = elements.filter((element) => element !== image1 && element !== image2)
  return filteredResult;
}

function slideImage(currentImage,nextImage, upcomingImage ) {
   let tl = gsap.timeline({defaults: {duration: 0.8, ease: Power1.easeInOut}});
  tl.to(`.image-${currentImage}`, {rotation: -10, xPercent: -100})
  .to(`.image-${currentImage}`, {rotation: 0, xPercent: 0})
  .to(`.image-${nextImage}`, {zIndex: 2 }, "-=1.6")
  .to(`.image-${currentImage}`, {zIndex: -1}, "-=1.6")
  .to(`.image-${upcomingImage}`, {zIndex: 1}, "-=1.6")
  .to(filterActiveImages(`.image-${nextImage}`,`.image-${currentImage}`), {zIndex:0}, "-=2.4")

return tl;
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg