標籤

｜JS Simple｜Scroll to Change Background

Scroll to Change Background

在網頁設計中，透過滾動頁面改變背景是一種簡單且有效的方式，能讓整個網站更具互動性和視覺吸引力。本篇教學將展示如何利用 JavaScript 和 CSS，實現這種滾動切換背景的效果。

首先建立背景圖列表 ul.bg_list 與 section 分開放。ul.bg_list 是用來放置背景圖片的容器，ul.bg_list li 是背景切換的單位，每個 li 對應一個背景，則是每一個滾動區塊的內容，透過 id 進行對應。

html

    
    
  • 
    
  • 
    
  • 




    
01





    
02





    
03

position: fixed：將背景設定為固定在視窗中，確保背景不會隨著滾動消失。
opacity：利用透明度來達成背景切換的漸變效果。
transition：設定透明度的過渡動畫，讓切換更加平滑。

css
ul.bg_list{ width:100vw; height:100vh; 
             position:fixed; left:0; top:0; /* 背景圖為 position:fixed; */
           }
ul.bg_list li{ opacity:0; /* 透明度0 */
               transition:opacity 1s; /* 透明度的淡入動畫 */
             }
ul.bg_list li.current{ opacity:0.45; /* 添加 current 透明度0.35 */ }

JavaScript 邏輯說明：當頁面滾動時，會動態檢查當前滾動高度與每個區塊的對應位置。利用 addClass 和 removeClass 動態切換當前背景的樣式。

script
$(document).ready(function(){
         // 畫面捲動時
        $(window).scroll(function(){

                 var windowHeihgt = $(window).height() / 2; //視窗高度的1/2，作為觸發條件的基準
                 $(".bg_list li").removeClass("current");
          
                 if( $(window).scrollTop() > $("section#section1").offset().top - windowHeihgt ){ //如果已滾到 #section1
                          $(".bg_list li:nth-of-type(1)").addClass("current"); //背景圖順序1 添加 current
                 }
                 if( $(window).scrollTop() > $("section#section3").offset().top - windowHeihgt ){ //如果已滾到 #section2
                          $(".bg_list li").removeClass("current");
                          $(".bg_list li:nth-of-type(3)").addClass("current"); //背景圖順序2 添加 current
                 }

         });
});

圖素來源：
AIPICT（https://aipict.com/）
Toptal®（https://www.toptal.com/）

標籤：