揭秘KPR Verse Footer Effect背後的神奇效果
瀏覽：992
當我滾動瀏覽 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 Link_
-
如何實時捕獲和流媒體以進行聊天機器人命令執行？在開發能夠執行命令的chatbots的領域中，實時從命令執行實時捕獲Stdout，一個常見的需求是能夠檢索和顯示標準輸出（stdout）在cath cath cant cant cant cant cant cant cant cant interfaces in Chate cant inter...程式設計 發佈於2025-05-02 -
在Ubuntu/linux上安裝mysql-python時，如何修復\“ mysql_config \”錯誤？mysql-python安裝錯誤：“ mysql_config找不到”“ 由於缺少MySQL開發庫而出現此錯誤。解決此問題，建議在Ubuntu上使用該分發的存儲庫。使用以下命令安裝Python-MysqldB： sudo apt-get安裝python-mysqldb sudo pip in...程式設計 發佈於2025-05-02
-
如何使用Python的請求和假用戶代理繞過網站塊？如何使用Python的請求模擬瀏覽器行為，以及偽造的用戶代理提供了一個用戶 - 代理標頭一個有效方法是提供有效的用戶式header，以提供有效的用戶 - 設置，該標題可以通過browser和Acterner Systems the equestersystermery和操作系統。通過模仿像Chro...程式設計 發佈於2025-05-02
-
如何使用Python理解有效地創建字典？在python中，詞典綜合提供了一種生成新詞典的簡潔方法。儘管它們與列表綜合相似，但存在一些顯著差異。 與問題所暗示的不同，您無法為鑰匙創建字典理解。您必須明確指定鍵和值。 For example:d = {n: n**2 for n in range(5)}This creates a dict...程式設計 發佈於2025-05-02
-
如何有效地選擇熊貓數據框中的列？在處理數據操作任務時，在Pandas DataFrames 中選擇列時，選擇特定列的必要條件是必要的。在Pandas中，選擇列的各種選項。 選項1：使用列名 如果已知列索引，請使用ILOC函數選擇它們。請注意，python索引基於零。 df1 = df.iloc [：，0：2]＃使用索引0和1 ...程式設計 發佈於2025-05-02
-
在PHP中如何高效檢測空數組？在PHP 中檢查一個空數組可以通過各種方法在PHP中確定一個空數組。如果需要驗證任何數組元素的存在，則PHP的鬆散鍵入允許對數組本身進行直接評估：一種更嚴格的方法涉及使用count（）函數： if（count（count（$ playerList）=== 0）{ //列表為空。 } 對...程式設計 發佈於2025-05-02
-
如何在MySQL的`IN`查詢中保持值的順序？在“ queries Problem:In a scenario where you have a table with an auto-incremented primary key, you may encounter situations where the results of an &q...程式設計 發佈於2025-05-02
-
如何在其容器中為DIV創建平滑的左右CSS動畫？通用CSS動畫，用於左右運動 ，我們將探索創建一個通用的CSS動畫，以向左和右移動DIV，從而到達其容器的邊緣。該動畫可以應用於具有絕對定位的任何div，無論其未知長度如何。 問題：使用左直接導致瞬時消失 更加流暢的解決方案：混合轉換和左 [並實現平穩的，線性的運動，我們介紹了線性的轉換。...程式設計 發佈於2025-05-02
-
為什麼儘管有效代碼，為什麼在PHP中捕獲輸入？在php ;?>" method="post">The intention is to capture the input from the text box and display it when the submit button is clicked.但是，輸出...程式設計 發佈於2025-05-02
-
為什麼PYTZ最初顯示出意外的時區偏移？與pytz 最初從pytz獲得特定的偏移。例如，亞洲/hong_kong最初顯示一個七個小時37分鐘的偏移： 差異源利用本地化將時區分配給日期，使用了適當的時區名稱和偏移量。但是，直接使用DateTime構造器分配時區不允許進行正確的調整。 example pytz.timezone（&#...程式設計 發佈於2025-05-02
-
您可以使用CSS在Chrome和Firefox中染色控制台輸出嗎？在javascript console 中顯示顏色是可以使用chrome的控制台顯示彩色文本，例如紅色的redors，for for for for錯誤消息？ 回答是的，可以使用CSS將顏色添加到Chrome和Firefox中的控制台顯示的消息（版本31或更高版本）中。要實現這一目標，請使用以下...程式設計 發佈於2025-05-02
-
如何在Java字符串中有效替換多個子字符串？在java 中有效地替換多個substring，需要在需要替換一個字符串中的多個substring的情況下，很容易求助於重複應用字符串的刺激力量。 However, this can be inefficient for large strings or when working with nu...程式設計 發佈於2025-05-02
-
如何使用“ JSON”軟件包解析JSON陣列？parsing JSON與JSON軟件包 QUALDALS：考慮以下go代碼：字符串 } func main（）{ datajson：=`[“ 1”，“ 2”，“ 3”]`` arr：= jsontype {} 摘要：= = json.unmarshal（[] byte（...程式設計 發佈於2025-05-02
-
Java中如何使用觀察者模式實現自定義事件？在Java 中創建自定義事件的自定義事件在許多編程場景中都是無關緊要的，使組件能夠基於特定的觸發器相互通信。本文旨在解決以下內容：問題語句我們如何在Java中實現自定義事件以促進基於特定事件的對象之間的交互，定義了管理訂閱者的類界面。 以下代碼片段演示瞭如何使用觀察者模式創建自定義事件： args...程式設計 發佈於2025-05-02
學習中文
- 1 走路用中文怎麼說？ 走路中文發音，走路中文學習
- 2 坐飛機用中文怎麼說？ 坐飞机中文發音，坐飞机中文學習
- 3 坐火車用中文怎麼說？ 坐火车中文發音，坐火车中文學習
- 4 坐車用中文怎麼說？ 坐车中文發音，坐车中文學習
- 5 開車用中文怎麼說？ 开车中文發音，开车中文學習
- 6 游泳用中文怎麼說？ 游泳中文發音，游泳中文學習
- 7 騎自行車用中文怎麼說？ 骑自行车中文發音，骑自行车中文學習
- 8 你好用中文怎麼說？ 你好中文發音，你好中文學習
- 9 謝謝用中文怎麼說？ 谢谢中文發音，谢谢中文學習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
