iT邦幫忙

2019 iT 邦幫忙鐵人賽

3
自我挑戰組

蛻變事實-UI設計師勇闖前端城系列 第 31

[蛻變事實-隨手帳] JQ套件-左右滑動效果(手勢版)

結束鐵人賽30天的不間斷PO文
以為要很久~很久~才會有空來這裡記錄
(也是有想過可能不會再到這裡PO文啦 XD ....因為平台真不好用)

沒想到最近在忙網頁效果,
找著找著就看到很多資料,而且也把套件效果實驗成功啦~
當要清一些畫面掉時,想到資料需要留下記錄
但本人卻無處可去...不紀錄過二天忙別的事,一定又馬上忘了我是在忙啥!?

所以開了鐵人文....又回到這兒來了/images/emoticon/emoticon28.gif


最近為了支援圖片滑動的效果,找了幾個有關的套件,把覺得記錄的整理如下啦:

Swiper

Swiper是純javascript打造的滑動特效插件,面向手機、平板電腦等移動終端。
能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。
開源、免費、穩定、使用簡單、功能強大,是架構移動終端網站的重要選擇!

英文網站簡體網站DEMO


iScrolljs

iscrolljs是一個高性能、輕量級、免費,跨平台的javascript庫。它可以應用於桌面,移動,智能電視,它一直在優化性能和尺寸,以便更好的應用於新老設備中。

不僅僅是提供滾動功能,它還可以根據需要,處理元素與用戶的交互。它增加了滾動,縮放,平移,無限滾動、視差滾動、旋轉木馬項目並且只有4kb大小。
Github資料iScroll 5 API 中文版


TouchSlider

TouchSlider是一個輕量級的JavaScript的組件,設計的目的是提供一個可以方便實現全平台(PC及移動端觸摸界面)的幻燈滑塊效果。

Github資料 / DEMO


參考資料


最開始我是研究iScroll,後來看到Swiper的文件及DEMO的視覺,比較符合我的需求,所以選擇了Swiper套件。我覺得有需要的人都可以研究看看那一套符合需求 /images/emoticon/emoticon29.gif


上一篇
[蛻變事實/D30] 設計師勇闖前端城-(練功總心得)
下一篇
[蛻變事實-隨手帳] AOS.js / Animate.css -網頁動畫套件 (超簡易版)
系列文
蛻變事實-UI設計師勇闖前端城35
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0

我要留言

立即登入留言