關注我的都知道,前端開頭推薦我一般只在微頭條發佈,這是第一款用圖文發佈的前端開源推薦,因為這個太強大了。
Flip 最先進的翻轉計數器插件是網絡上,它超級容易設置,非常靈活且動畫精美。無論您是想倒數一個活動,形象地進行籌款活動,顯示時鐘還是銷售櫃檯,Flip都可以滿足您的用例需求。
特點:
- 獨立工作,沒有依賴
- 超級快和美麗的動畫
- 響應性和移動友好
- 適用於所有主流瀏覽器
- JavaScript和jQuery API
- 適用於任何語言、地區或時區
預設
使用以下預設之一作為起點。每個預設的視覺風格都可以輕鬆使用 CSS 進行自定義。
Event Countdown
Timed Countdown
Recurring Event
Historic Counter
Fund Raising Campaign
Value Counter
Animated Values
Clock
Local Time
Stopwatch
Billboard
高級功能
QuickFlip:高性能翻轉動畫,翻轉卡片可以重疊。每秒可以多次更新值。
TimeSnap:計時器算法會自動更正JavaScript的setInterval時間漂移,從而實現高精度的間隔精度。
ServerSync:自動同步客戶端和服務器時間,無需其他配置要求。
TickEngine:Flip背後的Tick引擎支持豐富的計數器模板構建和轉換合成。
功能概述
翻轉面板模式
不同的呈現方式,每個角色一個單獨的翻轉板或一個巨大的翻轉板,慢速或快節奏的動畫,逼真的或未來派的動畫效果都是可能的。
- 從24種不同的寬鬆模式中進行選擇。
- 將翻轉動畫的持續時間控制為毫秒。
佈局引擎
基於Flexbox的佈局構建
- 快速建立自定義的計數器佈局
- 水平,垂直和疊加定位
- 居中,左,右,上,下或填充對齊
瀏覽器
已在下列瀏覽器上測試及通過。如果不支持,Tick將不加載並顯示遵循漸進增強原則的HTML回退內容。
- Chrome
- Firefox
- Edge
- Opera
- Safari 9+
- iOS Safari 9+
- Android 5+
- Internet Explorer 11+
現代靈活的CSS設置
Flip響應靈敏且移動友好。設置CSS以便於自定義。翻轉計數器可以使用基本的CSS屬性設置樣式。
- 翻轉器的控制角樣式
- 調整翻轉器的陰影
- 更改字體,顏色,背景色和陰影
- 添加您自己的樣式,Flip 基於 HTML,因此一切都可以設置樣式
轉換引擎
- 值轉換引擎,鏈接轉換以構建複雜的計數器而不編寫任何代碼。
- 從一個值插入另一個值
- 複雜轉換的高級轉換嵌套
- 根據輸入值多元化標籤
- 共有34個轉換功能
- 添加您自己的轉換函數或創建自定義預設
讓我們花一些時間一起建立一個翻轉時鐘。
地址
<code>https://pqina.nl/flip//<code>
太強了,有沒有?
閱讀更多 做工程師不做碼農 的文章