揭秘KPR Verse Footer Effect背後的神奇效果

當我滾動瀏覽 KPR-verse 網站時，我注意到底部有這個很酷的效果。每當我看到這樣的東西時，我總是想重現它。我的過程很簡單：我首先嘗試複製效果，然後寫一篇部落格來解釋它是如何完成的，旨在將複雜的設計分解為易於理解的步驟。

一開始，我經常懷疑自己能否成功，但經過深思熟慮，我通常會找到一種方法將設計分解。透過連接這些部分，我設法達到了效果。廢話不多說——讓我們深入探討如何自己製作！

分解 KPR 詩句頁腳效果

在網站的末尾，您會在背景中找到 KPR 橫幅。乍看之下可能有點複雜，但其實沒那麼複雜。

首先，使用 .container 類別建立一個 div。這將是我們教程的根元素。

接下來，將 .container 分為兩部分：.subcontainer-wrapper 和 footer。頁尾元素將放置 KPR 橫幅。

現在，將 .subcontainer-wrapper 進一步分成兩部分。上半部包含我們網站的所有內容，而下半部留空，沒有背景——基本上不可見，但它仍然具有視口的寬度和高度。下半部至關重要，因為它讓我們可以看到頁腳。

到目前為止，所有元素都處於正常的 HTML 流中，即從上到下。現在，我們需要透過將頁腳放在後面並將 .subcontainer-wrapper 放在前面來打破這個順序。為此，我們將 .subcontainer-wrapper 設定為相對於其父 .container 的絕對位置。這將從正常的 DOM 流中刪除 .subcontainer-wrapper。

這就是我們設定效果所需的全部。現在，用內容填滿 .subcontainer-wrapper 的上部，但將下部（不可見的 div）留空。另外，將內容新增到頁腳。

添加內容後，它應該看起來像這樣。

上部隱藏了背景，當你向下滾動時，當可見內容結束時，不可見部分會顯示頁腳。瞧！就是這樣——簡單又容易。

_感謝您的關注！我希望您發現本指南很有幫助且易於理解。保持好奇心並不斷探索！

原文：KPR-verse

演示網站：演示鏈接，在本次演示中，我使用了 Google I/O 網站 (https://io.google/2024/) 並對其進行了調整以展示類似的概念。

原始碼：Github連結_

以上是揭秘KPR Verse Footer Effect背後的神奇效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！