JS CSS實現數字滾動

2022-08-05 16:15:16 字數 786 閱讀 7435

最近在實現乙個顯示rgb顏色數值的動畫效果時,嘗試使用了writing-mode(書寫模式)及 text-orientation來實現文字的豎直方向的排列,並借助css的transition(過渡)來實現動畫效果。關於書寫模式,參考鏈結[鏈結描述]1

各瀏覽器對writing-mode的支援情況,可在can i use中檢視,而對text-orientation的支援情況在can i use中暫不能查到,根據筆者的測試,chrome/ff/opera均支援此樣式,而ie/edge都不支援。暫未在safari中測試,歡迎各位補充。

首先,建立數字的容器。因為rgb顏色的範圍是0~255,因此百位數字僅需1、2兩個數字。

0123456789

0123456789

12

接下來新增其css樣式,我們需要將文字的書寫方向改為從上至下,且字元方向是豎直的。使用wrting-mode樣式可以改變文字的書寫方向,使用text-orientation可以實現行內字元的旋轉。

.num_span span
此時,效果如圖

然後我們將外層容器設定為over-flow:hidden,再新增一點js即可實現數字的滾動效果。主要思路為,通過js分別得到數字個位、十位、百位上的數字,並改變對應的margin—top即可。需要注意的是,在數字小於10時,需額外處理一下十位數字的margin-top值,使十位上的數字隱藏。完整的**如下。

0123456789

0123456789

12

JS CSS 實現 懸浮滾動廣告

布局乙個絕對布局的div 寫乙個move方法改變div的left 和top值 需要注意 到達body邊界時候 改變方向 然後設定定時器呼叫move方法 不斷改變 left和top值 lang en charset utf 8 移動的小廣告title 注意 document.body.clienthe...

JS CSS實現滾動時間樣式

效果圖 動畫實現的方案是縮減上方div的高度帶動整體上滑,然後用js操作dom將最上方的div移到最下方。主要css continer scroll scroll span bar keyframes close 100 頁面主要部分 js根據時間動態生成dom方法 var timearray 9,...

實現數字滾動增長效果

前言 產品需求 針對資料總計做到動態的增長到後台返回的資料值。效果如同 因為不同位置的增長速度不同,在網上看到都是用引入外掛程式,例如jquery.animatenumber和numbergrow.js 實現了可見區域動態增長 都有用法和效果展示。1 function countup elem,en...