這是如何實現的呢?原效果中由于為了兼容不支持CSS滾動驅動的瀏覽器,特意用" />

日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

CSS 滾動驅動動畫實現圓弧滾動條

來源: 責編: 時間:2024-01-22 17:25:38 242觀看
導讀前不久看到這樣一個很有趣的效果,它的滾動條是沿著圓角邊緣滾動的,效果如下你可以查看原鏈接來體驗一下https://codepen.io/jh3y/pen/gOEgxbd。
這是如何實現的呢?原效果中由于為了兼容不支持CSS滾動驅動的瀏覽器,特意用

Irk28資訊網——每日最新資訊28at.com

前不久看到這樣一個很有趣的效果,它的滾動條是沿著圓角邊緣滾動的,效果如下Irk28資訊網——每日最新資訊28at.com

Irk28資訊網——每日最新資訊28at.com

你可以查看原鏈接來體驗一下Irk28資訊網——每日最新資訊28at.com

https://codepen.io/jh3y/pen/gOEgxbd。Irk28資訊網——每日最新資訊28at.com


Irk28資訊網——每日最新資訊28at.com

這是如何實現的呢?Irk28資訊網——每日最新資訊28at.com

原效果中由于為了兼容不支持CSS滾動驅動的瀏覽器,特意用 JS做了兼容,所以看著比較復雜,其實核心非常簡單,下面我將用最簡短的 CSS 來復刻這一效果,一起看看吧!Irk28資訊網——每日最新資訊28at.com

Irk28資訊網——每日最新資訊28at.com

一、SVG 路徑動畫

從本質上來講,其實是一個 SVG 路徑動畫。Irk28資訊網——每日最新資訊28at.com

具體如何實現呢?Irk28資訊網——每日最新資訊28at.com

首先,我們通過設計軟件繪制一個這樣的路徑。Irk28資訊網——每日最新資訊28at.com

Irk28資訊網——每日最新資訊28at.com

注意設置描邊的大小還有端點的類型,比如下面是round效果。Irk28資訊網——每日最新資訊28at.com

Irk28資訊網——每日最新資訊28at.com

然后導出SVG,可以得到這樣一段代碼。Irk28資訊網——每日最新資訊28at.com

<svg viewBox="0 0 31 433" fill="none" xmlns="http://www.w3.org/2000/svg">  <path d="M4 4C9.96737 4 15.6903 6.37053 19.9099 10.5901C24.1295 14.8097 26.5 20.5326 26.5 26.5V406.5C26.5 412.467 24.1295 418.19 19.9099 422.41C15.6903 426.629 9.96737 429 4 429" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/></svg>

然后,如何讓這段SVG動起來呢?Irk28資訊網——每日最新資訊28at.com

很簡單,現在SVG是一段實線,我們可以通過stroke-dasharray設置成虛線,比如:Irk28資訊網——每日最新資訊28at.com

path{  stroke-dasharray: 80}

這樣會得到一個實線和虛線間隔都是80的虛線。Irk28資訊網——每日最新資訊28at.com

Irk28資訊網——每日最新資訊28at.com

如果希望虛線空白的地方更大一點,該怎么設置呢?很簡單,繼續往后加。Irk28資訊網——每日最新資訊28at.com

path{  stroke-dasharray: 80 120}

效果如下:Irk28資訊網——每日最新資訊28at.com

Irk28資訊網——每日最新資訊28at.com

所以,這種寫法其實相當于把當前的值無限重復,示意如下:Irk28資訊網——每日最新資訊28at.com

Irk28資訊網——每日最新資訊28at.com

當然,我們這里不需要設置的這么復雜,只需要一小段實線就夠了,所以是實現加上一段足夠長的虛線(超過路徑本身就行),實現如下:Irk28資訊網——每日最新資訊28at.com

path{  stroke-dasharray: 80 1000}

這樣就得到了一小段實線。Irk28資訊網——每日最新資訊28at.com

Irk28資訊網——每日最新資訊28at.com

那么,如何讓他動起來呢?很簡單,改變一下偏移就可以,這個可以用stroke-dashoffset來實現。Irk28資訊網——每日最新資訊28at.com

比如:Irk28資訊網——每日最新資訊28at.com

@keyframes scroll {  to {    stroke-dashoffset: -370	}}path{  stroke-dasharray: 80 1000;  animation: scroll 3s alternate-reverse infinite;}

效果如下:Irk28資訊網——每日最新資訊28at.com

Irk28資訊網——每日最新資訊28at.com

是不是有點像呢?Irk28資訊網——每日最新資訊28at.com

我們再調整一下起始偏移量,讓它出去一點。Irk28資訊網——每日最新資訊28at.com

@keyframes scroll {  0% { stroke-dashoffset: 75; }  100% { stroke-dashoffset: -445; }}

這樣就更接近我們想要的效果了。Irk28資訊網——每日最新資訊28at.com

Irk28資訊網——每日最新資訊28at.com

整個運動原理就是這樣了,接著往下看Irk28資訊網——每日最新資訊28at.com

二、CSS 滾動驅動動畫

接下來需要通過滾動驅動動畫將容器滾動與CSS動畫「聯動」起來。Irk28資訊網——每日最新資訊28at.com

簡單來講,「CSS 滾動驅動動畫」指的是將「動畫的執行過程由頁面滾動」進行接管,也就是這種情況下,「動畫只會跟隨頁面滾動的變化而變化」,也就是滾動多少,動畫就執行多少,「時間不再起作用」。Irk28資訊網——每日最新資訊28at.com

先簡單布局一下:Irk28資訊網——每日最新資訊28at.com

<div class="list">  <div class="item" id="item_1">1</div>  <div class="item" id="item_2">2</div>  <div class="item" id="item_3">3</div>  <div class="item" id="item_4">4</div>  <div class="item" id="item_5">5</div>  <div class="item" id="item_6">6</div>  <div class="item" id="item_7">7</div></div>

美化一下:Irk28資訊網——每日最新資訊28at.com

Irk28資訊網——每日最新資訊28at.com

然后,我們將默認的滾動條隱藏,用我們這個 SVG路徑來代替,由于需要絕對定位,我們再套一層父級。Irk28資訊網——每日最新資訊28at.com

<div class="wrap">  <div class="list">    <div class="item" id="item_1">1</div>    <div class="item" id="item_2">2</div>    <div class="item" id="item_3">3</div>    <div class="item" id="item_4">4</div>    <div class="item" id="item_5">5</div>    <div class="item" id="item_6">6</div>    <div class="item" id="item_7">7</div>    <!--滾動條-->    <svg class="scroller" viewBox="0 0 31 433" fill="none" xmlns="http://www.w3.org/2000/svg">      <path class="scroller_thumb" d="M4 4C9.96737 4 15.6903 6.37053 19.9099 10.5901C24.1295 14.8097 26.5 20.5326 26.5 26.5V406.5C26.5 412.467 24.1295 418.19 19.9099 422.41C15.6903 426.629 9.96737 429 4 429" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>    </svg>  </div></div>

相關CSS如下:Irk28資訊網——每日最新資訊28at.com

.wrap{  position: relative;}.scroller {  position: absolute;  top: 0;  bottom: 0;  right: 0;  pointer-events: none;  height: -webkit-fill-available;  margin: 5px;}.scroller_thumb{  stroke: hsl(0 0% 100% / 0.5);  stroke-dasharray: 80 450;  stroke-width: 8px;  animation: scroll both 5s linear;}

這樣結構就搭好了,只是滾動條會自動播放。Irk28資訊網——每日最新資訊28at.com

Irk28資訊網——每日最新資訊28at.com

接下來就是最關鍵的一步,加上滾動驅動動畫。Irk28資訊網——每日最新資訊28at.com

.scroller_thumb{  animation: scroll both 5s linear;  animation-timeline: scroll();}

但是這樣是不起作用的,直接使用scroll()會自動尋找它的相對父級,也就是.wrap,但實際滾動的其實是.list,所以這種情況下我們需要具名的滾動時間線,實現如下:Irk28資訊網——每日最新資訊28at.com

.list{  scroll-timeline: --scroller;}.scroller_thumb{  animation: scroll both 5s linear;  animation-timeline: --scroller;}

這樣SVG路徑動畫就能跟隨容器滾動而運動了。Irk28資訊網——每日最新資訊28at.com

Irk28資訊網——每日最新資訊28at.com

三、CSS 滾動吸附

原效果中還有一個滾動回彈的效果,當滾動到容器邊緣時,會自動回彈到起始位置。Irk28資訊網——每日最新資訊28at.com

其實只需要用到 CSS scroll snap 就可以了。Irk28資訊網——每日最新資訊28at.com

https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type。Irk28資訊網——每日最新資訊28at.com

實現很簡單,給滾動容器添加scroll-snap-type屬性,表示這是個允許滾動吸附的容器。Irk28資訊網——每日最新資訊28at.com

.list{  scroll-snap-type: y mandatory;}

然后就指定需要吸附的點了,由于需要回彈的效果,所以滾動容器的首尾需要一個空白的容器,這里直接用兩個偽元素來生成Irk28資訊網——每日最新資訊28at.com

.list::before,.list::after{  content: '';  height: 50px;  flex-shrink: 0;}

效果如下:Irk28資訊網——每日最新資訊28at.com

Irk28資訊網——每日最新資訊28at.com

然后我們設置滾動吸附點就行了,設置第一個元素頂部和最后一個元素底部,其他元素居中就行了。Irk28資訊網——每日最新資訊28at.com

.item{  scroll-snap-align: center;}.item:first-child{  scroll-snap-align: start;}/*最后一個元素是 SVG,所以這里用倒數第二個元素*/.item:nth-last-child(2){  scroll-snap-align: end;}

這樣就實現了文章開頭的效果了。Irk28資訊網——每日最新資訊28at.com

Irk28資訊網——每日最新資訊28at.com

完整代碼可以查看以下鏈接(無任何 JS)Irk28資訊網——每日最新資訊28at.com

  • CSS round scroll (juejin.cn)[1]
  • CSS round scroll (codepen.io)[2]

四、總結一下

總的來說,CSS滾動驅動在滾動交互上帶來了無限可能,很多以前必須借助 JS來實現的都可以輕易實現,下面總結一下。Irk28資訊網——每日最新資訊28at.com

  • 從本質上來講,右側的滾動條其實是一個 SVG 路徑動畫。
  • SVG路徑可以通過stroke-dasharray設置虛實間隔。
  • 當虛線間隔足夠長時,超過路徑本身,就能得到一小塊實線。
  • 通過改變stroke-dashoffset偏移能夠實現路徑描邊動畫。
  • 借助 CSS滾動驅動動畫可以將SVG路徑動畫跟隨容器滾動而運動。
  • 滾動回彈效果其實就是CSS scroll snap實現的。

[1]CSS round scroll (juejin.cn): https://code.juejin.cn/pen/7326425332964130856。Irk28資訊網——每日最新資訊28at.com

[2]CSS round scroll (codepen.io): https://codepen.io/xboxyan/pen/WNmjZLo。Irk28資訊網——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-66203-0.htmlCSS 滾動驅動動畫實現圓弧滾動條

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 厲害,美國人又搞了一個壟斷的生態系統

下一篇: 【故障現場】多線程性能優化最大的坑,99%人都不自知

標簽:
  • 熱門焦點
Top 主站蜘蛛池模板: 视频| 博白县| 安顺市| 广宁县| 南昌市| 平遥县| 陇西县| 鄂托克旗| 清苑县| 贵南县| 广丰县| 南开区| 娱乐| 滕州市| 当阳市| 平罗县| 广丰县| 张家港市| 中阳县| 耿马| 华池县| 大邑县| 乐安县| 尖扎县| 修武县| 南丹县| 济源市| 孟连| 景宁| 贡觉县| 陆丰市| 布尔津县| 吴川市| 阿拉善右旗| 商都县| 邵阳县| 同江市| 南充市| 肥乡县| 靖江市| 莆田市|