一加Ace2 Pro官宣：普及16G內存 引領24G
一加官方今天繼續(xù)為本月發(fā)布的新機一加Ace2 Pro帶來預熱，公布了內存方面的信息。“淘汰 8GB ，12GB 起步，16GB 普及，24GB 引領，還有呢？#一加Ace2Pro#，2023 年 8 月，敬請期待。”同時
「慶余年2」 終于開播了~最近起點讀書APP內上架了慶余年典藏書，最大的特色是里面新加入了全新的閱讀皮膚，一個擬物化的卷軸滾動效果，效果如下：
就是在拖動頁面時，卷軸會隨著頁面的滾動而展開或卷起，就像在拖動真的畫布一樣，非常舒適，錄屏可能看著不是很清晰，強烈建議去端內自行體驗。
當時看到這個效果時就在思考，如何在 web 中也實現(xiàn)這樣一個效果呢？
經過一番琢磨，發(fā)現(xiàn)僅使用 CSS 就能完成這樣的效果。下面是我復刻的效果。
這是如何實現(xiàn)呢？一起看看吧
首先 CSS 中并沒有真正的 3d 滾動，立方體還可以勉強拼接，這種圓形的不行，因此我們需要用其他方式來實現(xiàn)。
這里其實是一個最簡單的平移動畫，只需要將紋理上下無縫平移，結合漸變和陰影，就能得到看似滾動的效果了。
先簡單布局一下。
<div class="reel"> <div class="reel-bg"></div></div>這里要用到卷軸的素材圖片，是這樣的。
這樣就能得到卷軸的結構了。
效果如下：
現(xiàn)在看著非常扁平，沒有立體感，主要是紋理沒有融入到背景之中。
如何將紋理完美的融合到后面的背景呢？沒錯，需要用到混合模式，這里用正片疊底就行了。
.reel-bg{ /**/ mix-blend-mode: multiply;}效果就好很多了。
最后給卷軸加點陰影，超出隱藏。
.reel{ /**/ overflow: hidden; box-shadow: 0 5px 10px 5px rgba(0,0,0,.3), 0 10px 20px 10px rgba(0,0,0,.5);}這樣就比較真實了。
滾動效果出來了，如何和頁面滾動關聯(lián)起來呢？接著往下看。
回到這里，先把整個布局完善一下。
<body> <div class="reel"> <div class="reel-bg"></div> </div> <article> <p>范慎很困難地撐著上眼皮，看著指頭算自己這輩子做過些什么有意義的事情，結果右手五根瘦成筷子一樣的指頭還沒有數完，他就嘆了一口氣，很傷心地放棄了這個工作。病房里的藥水味總是這么刺鼻，旁邊那床的老爺子前兩天已經去地藏王菩薩那里報道了，大概再過幾天就輪到自己吧。他得了某種怪病，重癥肌無力，就是特別適合言情小說男主角的那種病。據說沒得醫(yī)，將來嗝屁的那天什么都動不了，只有眼淚可以流下來。痛！</p> <p>范慎很困難地撐著上眼皮，看著指頭算自己這輩子做過些什么有意義的事情，結果右手五根瘦成筷子一樣的指頭還沒有數完，他就嘆了一口氣，很傷心地放棄了這個工作。病房里的藥水味總是這么刺鼻，旁邊那床的老爺子前兩天已經去地藏王菩薩那里報道了，大概再過幾天就輪到自己吧。他得了某種怪病，重癥肌無力，就是特別適合言情小說男主角的那種病。據說沒得醫(yī)，將來嗝屁的那天什么都動不了，只有眼淚可以流下來。痛！</p> <!--很多文本--> </article></body>簡單修飾一下，由于卷軸要固定到頂部，可以采用sticky布局。
html{ background-color: #22312D; font-family: cursive;}body{ margin: 0;}article{ background-color: #F5EBD4; padding: 1em 0.5em; border-left: 10px solid #405C53; border-right: 10px solid #405C53; margin: 0 15px;}p{ margin: 0; padding: 0.2em 0; color: #2C402E; line-height: 150%; text-indent: 2em;}h1{ text-align: center; color: #F5EBD4;}效果如下：
不過這里還有點問題，由于是整個頁面在滾動，內容滾到頂部會漏出來，如下：
現(xiàn)在就讓卷軸滾動和頁面滾動聯(lián)動起來， 非常簡單，只需要添加animation-timeline屬性就行了，設置滾動時間線為root，如下：
.reel-bg{ animation: scroll 1s linear forwards; animation-timeline: scroll(root);}這樣在頁面滾動時卷軸也跟著“轉動”了。
但看著卷軸轉地是不是有點慢了？
確實是這樣，這個時候表示頁面從頭滾到到底部，執(zhí)行一次動畫，也就是滾動一圈，所以頁面內容越多，滾動距離越長，那么卷軸轉的也就越慢。
下面來修復這個問題
簡單來處理，可以給個合適的動畫次數，比如：
.reel-bg{ animation: scroll 1s linear forwards 5; animation-timeline: scroll(root);}這樣表示頁面從頭滾到到底部，會執(zhí)行5次動畫，也就是相當于會滾動5圈，所以看著速度就變快了。
現(xiàn)在就舒服多了。
不過這種處理方式有個問題，動畫次數是跟內容長度強相關的，如果在向下滾動時動態(tài)加載內容，就需要更新這個值，稍顯麻煩。
那么，有沒有辦法讓滾動速度保持均衡呢？也就是無論內容多少，速度都是一致的。
這就需要用到 CSS 動畫范圍區(qū)間了，也就是animation-range，簡單來講就是設置滾動區(qū)間。
核心實現(xiàn)其實就這幾行，是不是非常簡單。
.reel-bg{ --s: 999999; animation: scroll 1s linear forwards calc(var(--s)/184/3.14); animation-timeline: scroll(root); animation-range: 0 calc(var(--s) * 1px);}雖然 CSS 實現(xiàn)很簡單，但是兼容性還不行，截至目前（2024年4月27日）僅支持Chrome 115+。
你也可以訪問以下鏈接查看真實效果。
以上就是本文的全部內容了，一個有趣的交互效果，你學到了嗎，下面總結一下本文重點。
[1]CSS QYN book (juejin.cn)： https://code.juejin.cn/pen/7362400098958966793。
[2]CSS QYN book (codepen.io)： https://codepen.io/xboxyan/pen/VwNqEoE。
本文鏈接：http://m.www897cc.com/showinfo-26-91369-0.html一篇帶你學習 CSS 實現(xiàn)卷軸滾動效果
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
下一篇： 12306技術內幕，你知道嗎？
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號