在輪播圖裏尋求新穎是不是搞錯了什麼

語言: CN / TW / HK

前言

大家好,這裏是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

最後

上面的哪一種輪播方式是你的最愛?個人偏好層疊式的最後一個。

所有輪播圖地址:猛戳這裏