在轮播图里寻求新颖是不是搞错了什么

2,666 阅读3分钟

前言

大家好,这里是CSS魔法使——alphardex。

轮播图(Carousel),相信大家并不陌生。平时大部分我们都是借助现有的框架来实现的,大都是swiper,或者UI框架里的某一个小组件。于是乎这东西就开始变得千篇一律:几张图片,外加几个小点,两边各有2个箭头,能够点击它们进行导航,这就完了。但是,为了追求更完美的体验,我们并不能止步于此,应该发挥自己的创造力和想象力,来创造与众不同的轮播图。

注:由于代码量过大,本文将只会说实现思路,具体代码请点击demo链接查看。

正片

页面过渡式

c1.gif

实现思路:

  1. 用绝对定位堆叠好所有图片
  2. 定义好过渡用的几根条子,当用户点击导航时使其交错下落(本文的所有动画都将用Web Animations API实现),全部下落后(可用Promise.all判断)将要显示的图片置于顶层

demo地址:Page Transition Carousel

3D式

c2.gif

实现思路:

  1. 利用CSS的3D变换排列好图片,将一些关键的数值抽成变量(比如rotateX的值)
  2. 添加手势判断(这里用的hammer.js),上下滑动时更改rotateX的变量值即可

demo地址:3d Carousel Swipe

层叠式

色彩变换

c3.gif

实现思路:

  1. 用绝对定位排好所有图片,同时排好所有底色
  2. 用户点击图片时,将当前的图片淡出,之后淡入新的图片,同时增加当前底色的层级,使其位于顶层,对其应用scaleX动画即可

demo地址:Product Carousel

卡片飞出

c3-2.gif

实现思路:

  1. 用CSS的3D变换将图片有序堆叠在一起(主要是translateY和translateZ)
  2. 使卡片变得可拖拽(这里用了gsap的draggable插件)
  3. 卡片切换时,改变CSS变量--i(它控制着translateY和translateZ的值)
  4. 松开时,计算出卡片与坐标轴的夹角和距离,并应用到动画中,形成卡片飞出的效果

demo地址:Tinder Card Swipe

裁剪过渡

c3-3.gif

实现思路:

  1. 将所有图片有序堆叠好
  2. 用clip-path裁剪图片的容器,将所有裁剪点的值都设定为变量
  3. 用户鼠标悬浮至容器上时,对裁剪点应用交错动画,形成错位拉开的效果
  4. 用户点击图片标题时,同样对4个裁剪点应用交错动画,使图片全部显现出来
  5. 用户悬浮在各个标题上的文字填充动画可用background-clip实现

demo地址:Clip-path Image Slider

彩蛋

CSS动画3D点阵圣诞树

tree.gif

demo地址:3D Christmas Tree

最后

上面的哪一种轮播方式是你的最爱?个人偏好层叠式的最后一个。

所有轮播图地址:猛戳这里