揭秘KPR Verse Footer Effect背後的神奇效果
瀏覽：869
當我滾動瀏覽 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_
-
在PHP腳本和瀏覽器中如何有效刪除Cookie？有效地刪除cookies 有效地刪除cookie而不是簡單地解開它，請按照以下步驟操作： ，您可以拆開cookie變量以從PHP腳本中刪除它。但是，這僅將cookie從腳本本身中刪除。 2。將到期時間設置為過去：到期，您可以將其到期時間設置為過去的日期。可以使用以下代碼完成此操作：在此代碼中，-...程式設計 發佈於2025-04-17 -
為什麼HTML無法打印頁碼及解決方案無法在html頁面上打印頁碼？ @page規則在@Media內部和外部都無濟於事。 HTML:Customization:@page { margin: 10%; @top-center { font-family: sans-serif; font-weight: ...程式設計 發佈於2025-04-17
-
Java中Lambda表達式為何需要“final”或“有效final”變量？Lambda Expressions Require "Final" or "Effectively Final" VariablesThe error message "Variable used in lambda expression shou...程式設計 發佈於2025-04-17
-
PHP與C++函數重載處理的區別作為經驗豐富的C開發人員脫離謎題，您可能會遇到功能超載的概念。這個概念雖然在C中普遍，但在PHP中構成了獨特的挑戰。讓我們深入研究PHP功能過載的複雜性，並探索其提供的可能性。 在PHP中理解php的方法在PHP中，函數超載的概念（如C等語言）不存在。函數簽名僅由其名稱定義，而與他們的參數列表無關...程式設計 發佈於2025-04-17
-
預編譯查詢與轉義函數：為何預編譯語句更安全？使用準備好的參數化查詢來增強安全性：為什麼它們在數據庫查詢的領域中超越逃生功能在數據庫查詢的領域，對SQL Intection volnerabilities的攻擊的重要性，無法超越SQL Incection vulnerabilities。一個常見的問題是：為什麼準備準備的參數化查詢比其逃生功能...程式設計 發佈於2025-04-17
-
C#應用如何通過資源文件實現本地化？C# 應用本地化：實用指南 本地化對於構建面向不同語言和文化用戶的應用程序至關重要。在 C# 中，本地化過程很簡單，只需使用資源文件 (.resx) 並管理線程文化設置即可。以下是如何開始的分步指南： 添加資源文件： 右鍵單擊項目的“屬性”，選擇“添加 -> 新建項...” ，然後從“Visual...程式設計 發佈於2025-04-17
-
如何解決AppEngine中“無法猜測文件類型，使用application/octet-stream...”錯誤？appEngine靜態文件mime type override ，靜態文件處理程序有時可以覆蓋正確的mime類型，在錯誤消息中導致錯誤消息：“無法猜測mimeType for for file for file for [File]。 application/application/octet...程式設計 發佈於2025-04-17
-
如何將來自三個MySQL表的數據組合到新表中？mysql：從三個表和列的新表創建新表 答案：為了實現這一目標，您可以利用一個3-way Join。 選擇p。 *，d.content作為年齡 來自人為p的人 加入d.person_id = p.id上的d的詳細信息 加入T.Id = d.detail_id的分類法 其中t.taxonomy ...程式設計 發佈於2025-04-17
-
input: Why Does "Warning: mysqli_query() expects parameter 1 to be mysqli, resource given" Error Occur and How to Fix It? output: 解決“Warning: mysqli_query() 參數應為 mysqli 而非 resource”錯誤的解析與修復方法mysqli_query（）期望參數1是mysqli，resource給定的，嘗試使用mysql Query進行執行MySQLI_QUERY_QUERY formation，be be yessqli：sqli：sqli：sqli：sqli：sqli：sqli： mysqli，給定的資源“可能發...程式設計 發佈於2025-04-17
-
收益遞減法則詳解及應用[2 的回報降低的原則決定，在添加某些元素的同時，最初會改善產品或體驗，超過最佳點會導致負面後果。 這適用於設計和開發的各個方面。 太多的動畫會引起干擾，而中等量則增強了自然流動。 同樣，足夠的線間距可提高可讀性，但是過度間距會阻礙它。 上下文Alt文本是有益的，但過度會變成噪音。 適當的填...程式設計 發佈於2025-04-17
-
Spark DataFrame如何添加常數列？在spark中添加spark dataframes中的常數列在Spark中，可以使用各種方法在數據幀中添加一個常數列。值，可以用作dataframe.withcolumn的第二個參數，以添加一個常數列：對於更複雜的列，諸如數組，地圖和struct之類的函數可用於構建所需的列值：typedLit (...程式設計 發佈於2025-04-17
-
在UTF8 MySQL表中正確將Latin1字符轉換為UTF8的方法在UTF8表中將latin1字符轉換為utf8 ，您遇到了一個問題，其中含義的字符（例如，“jáuòiñe”）在utf8 table tabled tablesset中被extect（例如，“致電。為了解決此問題，您正在嘗試使用“ mb_convert_encoding”和“ iconv”轉換受...程式設計 發佈於2025-04-17
-
如何檢查對像是否具有Python中的特定屬性？方法來確定對象屬性存在尋求一種方法來驗證對像中特定屬性的存在。考慮以下示例，其中嘗試訪問不確定屬性會引起錯誤： >>> a = someClass（） >>> A.property Trackback（最近的最新電話）： 文件“ ”，第1行， AttributeError: SomeClass...程式設計 發佈於2025-04-17
-
Python高效去除文本中HTML標籤方法在Python中剝離HTML標籤，以獲取原始的文本表示Achieving Text-Only Extraction with Python's MLStripperTo streamline the stripping process, the Python standard librar...程式設計 發佈於2025-04-17
-
解決MySQL錯誤1153：數據包超出'max_allowed_packet'限制mysql錯誤1153：故障排除比“ max_allowed_packet” bytes 更大的數據包，用於面對陰謀mysql錯誤1153，同時導入數據capase doft a Database dust？讓我們深入研究罪魁禍首並探索解決方案以糾正此問題。 理解錯誤此錯誤表明在導入過程中...程式設計 發佈於2025-04-17
學習中文
- 1 走路用中文怎麼說？ 走路中文發音，走路中文學習
- 2 坐飛機用中文怎麼說？ 坐飞机中文發音，坐飞机中文學習
- 3 坐火車用中文怎麼說？ 坐火车中文發音，坐火车中文學習
- 4 坐車用中文怎麼說？ 坐车中文發音，坐车中文學習
- 5 開車用中文怎麼說？ 开车中文發音，开车中文學習
- 6 游泳用中文怎麼說？ 游泳中文發音，游泳中文學習
- 7 騎自行車用中文怎麼說？ 骑自行车中文發音，骑自行车中文學習
- 8 你好用中文怎麼說？ 你好中文發音，你好中文學習
- 9 謝謝用中文怎麼說？ 谢谢中文發音，谢谢中文學習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
