通過CSS滾動時間表滑過無限尺寸

CSS最初的設計理念，其創建者曾設想它將成為網頁行為控制的主要技術，而腳本語言僅作為CSS無法聲明式實現功能時的備選方案。這種優先使用CSS的方法論基於“腳本是編程，編程很難”的理念。自引入：hover偽類以來，CSS一直在標準化開發人員在JavaScript中創建的模式，並將其“收錄”到CSS標準中。從這個角度來看，JavaScript幾乎像是“變通方法”，而CSS才是官方途徑。

因此，使用CSS實現類似腳本的行為會讓我們感覺不那麼“彆扭”，而像新的scroll-timeline特性這樣擁有良好瀏覽器支持的功能出現也就不足為奇了。許多開發者實現了巧妙的視差滾動網站，這使得我們無法將這個CSS功能“精靈”再放回瓶子裡。如果您不希望在下一個視差滾動網站中出現卡頓的主線程動畫，那麼您現在必須轉向CSS黑客的“黑暗面”。 （開個玩笑），如果您更喜歡命令式編程，也存在一個新的JavaScript API用於滾動關聯動畫。

將JavaScript示例遷移到CSS

將Chris Coyier的scroll-timeline之前的視差滾動動畫示例進行修改，用一行CSS代碼替換Chris用來控制動畫的CSS，並完全刪除JavaScript代碼，這令人滿意地簡單。

body, .progress, .cube {
  animation-timeline: scroll();
}

不帶參數使用scroll()函數會設置一個“匿名滾動進度時間線”，這意味著如果我們的書寫模式是英文，瀏覽器將基於最近的可以垂直滾動的祖先元素來進行動畫。不幸的是，我們似乎只能選擇基於特定元素的x軸或y軸上的滾動來進行動畫，而不能同時基於兩者，這將非常有用。作為一個函數，我們可以向scroll()傳遞參數，這可以更好地控制我們希望滾動如何運行動畫。

多維度實驗

更好的是scroll-scope屬性。將其應用於容器元素意味著我們可以基於任何具有相同已分配作用域的可滾動元素，對任何選定的祖先元素上的屬性進行動畫。這讓我開始思考……由於CSS Houdini允許我們在CSS中註冊動畫友好的、可繼承的屬性，我們可以基於頁面上的多個可滾動區域組合同一個元素上的動畫。這為有趣的教學設計可能性打開了大門，例如我下面的實驗。

滾動淺綠色卡片上的水平敘述會水平旋轉3D NES遊戲機，滾動深綠色卡片上的垂直敘述會垂直旋轉NES遊戲機。在我之前的文章中，我提到我過去的CSS技巧總是歸結為使用CSS隱藏和顯示有限的可能性。我對這個基於滾動的實驗感興趣的地方在於組合的垂直和水平旋轉的組合爆炸。動畫時間線提供了過去不可能實現的純CSS交互性。

實現細節不如timeline-scope的使用和自定義屬性重要。我們註冊兩個自定義角度屬性：

body, .progress, .cube {
  animation-timeline: scroll();
}

然後，我們從Julian Garner令人驚嘆的CSS 3D建模應用程序中的示例中“借用”NES 3D模型。我們更新.scene類，使3D旋轉基於我們的新變量，如下所示：

@property --my-y-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --my-x-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: -35deg;
}</angle></angle>

接下來，我們為body元素提供一個帶有兩個自定義命名作用域的scroll-scope。

.scene {
  transform: rotateY(var(--my-y-angle)) rotateX(var(--my-x-angle));
}

我沒有看到任何關於傳入多個作用域的官方文檔，但它確實在Google Chrome和Edge中有效。如果它不是正式支持的特性，我希望它能成為標準的一部分，因為它非常方便。

接下來，我們為兩個可滾動卡片和我們想要觸發動畫的軸定義命名時間線。

body {
  scroll-scope: --myScroller,--myScroller2; 
}

並將動畫添加到場景中：

.card:first-child {
  scroll-timeline-axis: x;
  scroll-timeline-name: --myScroller;
}

.card:nth-child(2) {
  scroll-timeline-axis: y;
  scroll-timeline-name: --myScroller2;
}

由於3D模型繼承了文檔正文的x和y角度，因此滾動卡片現在會以垂直和水平角度變化的組合旋轉模型。

超越滾動條的用戶控制動畫

仔細想想，這種行為不僅僅對滾動驅動的動畫有用。在上面的實驗中，我們更多地將可滾動區域用作控制3D模型屬性的滑塊。在完成工作後，我出去散步，並幻想如果實際的範圍輸入可以控制動畫時間線會多麼酷。然後我發現它們可以！至少在Chrome中可以。純CSS CMS？

在我們從Julian Garner那裡徵用3D模型的同時，讓我們看看是否可以使用範圍輸入來控制他的X翼模型。

令人難以置信的是，我們只需使用CSS就能實現這一點，而且我們可以用任意數量的屬性來實現。對我來說，這還不夠。我希望看到其他可以操縱動畫時間線的輸入控件。想像一下，文本字段在您填寫時推進動畫，或者按鈕能夠播放或反轉動畫。後者可以通過將:active偽類與animation-play-state屬性結合起來在某種程度上實現。但是根據我的經驗，當您嘗試使用它來動畫多個自定義屬性時，瀏覽器可能會感到困惑。相比之下，動畫時間線在設計時就考慮到了這個用例，因此運行流暢，完全符合我的預期。

注意到這個新興CSS特性的潛力的人並不只有我一個。有人已經通過結合scroll-timeline和復選框技巧實現了這個巧妙的Doom克隆。我的問題是它仍然不夠。我們在Chrome中擁有足夠的資源來使用滾動條和範圍輸入作為遊戲控件來實現化身構建器。我很高興嘗試在scroll-timeline特性出現之前的時代中前所未有的不可預測、複雜的體驗。畢竟，如果你必須向外星人解釋電子遊戲的定義，難道你不會說它只是一個超交互式動畫嗎？

以上是通過CSS滾動時間表滑過無限尺寸的詳細內容。更多資訊請關注PHP中文網其他相關文章！