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

語言: 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

最後

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

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