web-slinger.css：跨越swiper-verse

我以前的帖子

強調了水平滑動在Tinder上的不可逆轉後果。 我將在另一個時候深入研究這種挫敗感，但乍一看，Swipe Navigation對於web-slinger.css來說似乎是完美的 - 我的實驗性，純CSS替代了WOW.JS的單向滾動觸發動畫。 （仍在創作主題曲！）

> web-slinger.css可以使用僅使用CSS來喜歡/不喜歡元素的Tinder風格的滑動互動嗎？ 更重要的是，根據大眾需求，這是否可以使用蜘蛛俠圖像來證明是合理的嗎？ 介紹蜘蛛豬刷子 - 我提出的驗證碼更換（因為誰不喜歡蜘蛛桿？）。 向左或向右滑動（目前僅在Chrome/Edge下方）註冊您的意見。 > 擴展地平線

顯然，

改變了Web-Slinger對

[class^="scroll-trigger-"] {
  view-timeline-axis: x;
}

類的元素的默認行為，使滾動觸發器對水平而不是垂直，滾動反應。 否則，儘管由於容器寬度而在視覺上隱藏了觸發器，因為它們在我們的刀刀上的垂直折疊上方。

>我的初始步驟涉及分叉尼古拉·塔拉諾夫（Nikolay Talanov）出色的JavaScript Tinder Swipe演示，刪除JavaScript，除了一張卡外，然後將其導入Web-slinger.css並應用水平補丁。 卡容器變成了scroll-trigger-n，並帶有三個並排的視口大小的捲軸縫製框。中間幻燈片使用的

，在中心啟動用戶並允許向後/向前滾動。

position: fixed>注意：scroll-align: center>具有非常規滾動驅動的動畫，可滾動元素無需滾動任何可見的內容。 就像複選框hacks一樣 - 隱藏複選框，樣式標籤。我們利用可滾動元素的CSS行為，而不是其默認UI。 第三個幻燈片上的

a

div激活了拒絕動畫： >它起作用了！ （敘述者：不是，真的。

添加此會導致頁面加載中自動“喜歡”的蜘蛛桿。 非常適合普遍崇拜的人（AHEM，中年CSS黑客）。 但是，蜘蛛桿並不是普遍的愛，所以讓我們研究為什麼右翼的行為與預期的不同，儘管看似相同。 scroll-trigger-1後退

<div>
  </div>
<main>
  <div></div>
  <div></div>
  <div><div></div></div>
</main>

此錯誤突出顯示了

的限制。 Web-Slinger依賴於僅適用於僅由

向後

<div>
  <div></div>
</div>
<main>
  <div><div></div></div>
  <div></div>
  <div><div></div></div>
</main>

滾動觸發的動畫的技術。

>可視化器表明，無論animation-range>如何，動畫都在元素朝滾動方向離開視口之後完成 -

的相反。 幸運的是，Bramus（Chrome Dev Team）有一個用於檢測CSS滾動方向的演示。使用他巧妙的

自定義屬性，我們可以通過樣式查詢來控制--scroll-direction元素的外觀：scroll-trigger-2

[class^="scroll-trigger-"] {
  view-timeline-axis: x;
}

這可確保僅在上一個幻燈片上出現，並通過向後滾動到達。

（由三秒鐘的三步動畫控制）計算當前幻燈片，需要果斷的滑動以觸發不喜歡的幻燈片。 .scroll-trigger-2最終滑動--slide-index

跟踪蜘蛛桿的意見，我使用第三方計數器圖像作為背景：

>經驗教訓

<div>
  </div>
<main>
  <div></div>
  <div></div>
  <div><div></div></div>
</main>

>這比預期的要復雜，這主要是由於使用僅在向後滾動下運行的滾動觸發動畫的挑戰。 這是寶貴的知識。 當前規格中隱藏的功率令人驚訝。我們可以根據非常具體的滾動行為進行樣式。 但是，我們不得不攻擊API才能訪問此功能。 理想的解決方案將是：

使用這樣的API，蜘蛛豬sw刀不需要黑客。

>我希望對捲軸驅動的動畫進行更廣泛的瀏覽器支持，並具有更靈活的規格，以鼓勵設計師為他們的經驗構建非線性講故事。 如果沒有，一旦動畫時間表得到了更廣泛的支持，則可能是時候使web-slinger.css更加健壯和準備就緒。

<div>
  <div></div>
</div>
<main>
  <div><div></div></div>
  <div></div>
  <div><div></div></div>
</main>

>

以上是web-slinger.css：跨越swiper-verse的詳細內容。更多資訊請關注PHP中文網其他相關文章！