MIX Fold3包裝盒泄露 新機(jī)本月登場(chǎng)
小米的全新折疊屏旗艦MIX Fold3將于本月發(fā)布，近日該機(jī)的真機(jī)包裝盒在網(wǎng)上泄露。從圖上來看，新的MIX Fold3包裝盒在外觀設(shè)計(jì)方面延續(xù)了之前的方案，變化不大，這也是目前小米旗艦
「慶余年2」 終于開播了~最近起點(diǎn)讀書APP內(nèi)上架了慶余年典藏書，最大的特色是里面新加入了全新的閱讀皮膚，一個(gè)擬物化的卷軸滾動(dòng)效果，效果如下：
就是在拖動(dòng)頁(yè)面時(shí)，卷軸會(huì)隨著頁(yè)面的滾動(dòng)而展開或卷起，就像在拖動(dòng)真的畫布一樣，非常舒適，錄屏可能看著不是很清晰，強(qiáng)烈建議去端內(nèi)自行體驗(yàn)。
當(dāng)時(shí)看到這個(gè)效果時(shí)就在思考，如何在 web 中也實(shí)現(xiàn)這樣一個(gè)效果呢？
經(jīng)過一番琢磨，發(fā)現(xiàn)僅使用 CSS 就能完成這樣的效果。下面是我復(fù)刻的效果。
這是如何實(shí)現(xiàn)呢？一起看看吧
首先 CSS 中并沒有真正的 3d 滾動(dòng)，立方體還可以勉強(qiáng)拼接，這種圓形的不行，因此我們需要用其他方式來實(shí)現(xiàn)。
這里其實(shí)是一個(gè)最簡(jiǎn)單的平移動(dòng)畫，只需要將紋理上下無縫平移，結(jié)合漸變和陰影，就能得到看似滾動(dòng)的效果了。
先簡(jiǎn)單布局一下。
<div class="reel"> <div class="reel-bg"></div></div>這里要用到卷軸的素材圖片，是這樣的。
這樣就能得到卷軸的結(jié)構(gòu)了。
效果如下：
現(xiàn)在看著非常扁平，沒有立體感，主要是紋理沒有融入到背景之中。
如何將紋理完美的融合到后面的背景呢？沒錯(cuò)，需要用到混合模式，這里用正片疊底就行了。
.reel-bg{ /**/ mix-blend-mode: multiply;}效果就好很多了。
最后給卷軸加點(diǎn)陰影，超出隱藏。
.reel{ /**/ overflow: hidden; box-shadow: 0 5px 10px 5px rgba(0,0,0,.3), 0 10px 20px 10px rgba(0,0,0,.5);}這樣就比較真實(shí)了。
滾動(dòng)效果出來了，如何和頁(yè)面滾動(dòng)關(guān)聯(lián)起來呢？接著往下看。
回到這里，先把整個(gè)布局完善一下。
<body> <div class="reel"> <div class="reel-bg"></div> </div> <article> <p>范慎很困難地?fù)沃涎燮ぃ粗割^算自己這輩子做過些什么有意義的事情，結(jié)果右手五根瘦成筷子一樣的指頭還沒有數(shù)完，他就嘆了一口氣，很傷心地放棄了這個(gè)工作。病房里的藥水味總是這么刺鼻，旁邊那床的老爺子前兩天已經(jīng)去地藏王菩薩那里報(bào)道了，大概再過幾天就輪到自己吧。他得了某種怪病，重癥肌無力，就是特別適合言情小說男主角的那種病。據(jù)說沒得醫(yī)，將來嗝屁的那天什么都動(dòng)不了，只有眼淚可以流下來。痛！</p> <p>范慎很困難地?fù)沃涎燮ぃ粗割^算自己這輩子做過些什么有意義的事情，結(jié)果右手五根瘦成筷子一樣的指頭還沒有數(shù)完，他就嘆了一口氣，很傷心地放棄了這個(gè)工作。病房里的藥水味總是這么刺鼻，旁邊那床的老爺子前兩天已經(jīng)去地藏王菩薩那里報(bào)道了，大概再過幾天就輪到自己吧。他得了某種怪病，重癥肌無力，就是特別適合言情小說男主角的那種病。據(jù)說沒得醫(yī)，將來嗝屁的那天什么都動(dòng)不了，只有眼淚可以流下來。痛！</p> <!--很多文本--> </article></body>簡(jiǎn)單修飾一下，由于卷軸要固定到頂部，可以采用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;}效果如下：
不過這里還有點(diǎn)問題，由于是整個(gè)頁(yè)面在滾動(dòng)，內(nèi)容滾到頂部會(huì)漏出來，如下：
現(xiàn)在就讓卷軸滾動(dòng)和頁(yè)面滾動(dòng)聯(lián)動(dòng)起來， 非常簡(jiǎn)單，只需要添加animation-timeline屬性就行了，設(shè)置滾動(dòng)時(shí)間線為root，如下：
.reel-bg{ animation: scroll 1s linear forwards; animation-timeline: scroll(root);}這樣在頁(yè)面滾動(dòng)時(shí)卷軸也跟著“轉(zhuǎn)動(dòng)”了。
但看著卷軸轉(zhuǎn)地是不是有點(diǎn)慢了？
確實(shí)是這樣，這個(gè)時(shí)候表示頁(yè)面從頭滾到到底部，執(zhí)行一次動(dòng)畫，也就是滾動(dòng)一圈，所以頁(yè)面內(nèi)容越多，滾動(dòng)距離越長(zhǎng)，那么卷軸轉(zhuǎn)的也就越慢。
下面來修復(fù)這個(gè)問題
簡(jiǎn)單來處理，可以給個(gè)合適的動(dòng)畫次數(shù)，比如：
.reel-bg{ animation: scroll 1s linear forwards 5; animation-timeline: scroll(root);}這樣表示頁(yè)面從頭滾到到底部，會(huì)執(zhí)行5次動(dòng)畫，也就是相當(dāng)于會(huì)滾動(dòng)5圈，所以看著速度就變快了。
現(xiàn)在就舒服多了。
不過這種處理方式有個(gè)問題，動(dòng)畫次數(shù)是跟內(nèi)容長(zhǎng)度強(qiáng)相關(guān)的，如果在向下滾動(dòng)時(shí)動(dòng)態(tài)加載內(nèi)容，就需要更新這個(gè)值，稍顯麻煩。
那么，有沒有辦法讓滾動(dòng)速度保持均衡呢？也就是無論內(nèi)容多少，速度都是一致的。
這就需要用到 CSS 動(dòng)畫范圍區(qū)間了，也就是animation-range，簡(jiǎn)單來講就是設(shè)置滾動(dòng)區(qū)間。
核心實(shí)現(xiàn)其實(shí)就這幾行，是不是非常簡(jiǎ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 實(shí)現(xiàn)很簡(jiǎn)單，但是兼容性還不行，截至目前（2024年4月27日）僅支持Chrome 115+。
你也可以訪問以下鏈接查看真實(shí)效果。
以上就是本文的全部?jī)?nèi)容了，一個(gè)有趣的交互效果，你學(xué)到了嗎，下面總結(jié)一下本文重點(diǎn)。
[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://www.tebozhan.com/showinfo-26-91369-0.html一篇帶你學(xué)習(xí) CSS 實(shí)現(xiàn)卷軸滾動(dòng)效果
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)