JavaScript 網頁飄下美麗白色雪花效果(js 程式碼)


這幾天大家看我們網站頁面,應該發現了螢幕畫面正飄著冉冉白雪,這可不是螢幕接觸不良造成的雪花干擾,而是 JetPack 團隊追加的一枚小小彩蛋,除了讓網站畫面變得更美麗之外,不斷降下的白雪其實相當應景。

尤其在滑鼠在螢幕上滑來滑去時還能影響白雪飄動的方向,也是頗為有趣的賣點。相信這項功能值得各位網站站長與部落客一裝,尤其幾天後就是北半球最冷的聖誕節,有了白雪陪伴就更符合冬天獨有的風味。

請參見下圖一,這次的雪花落下特效的作用區域是整個網站螢幕畫面,不會阻礙正常滑鼠操作。雪花還會隨著滑鼠移動而飄移。

Vedfolnir-WordPress-New-Function-Setting-Snow-Falling-Screen
圖一,網站畫面擷取。

第一次開啟網站頁面時並不會立刻出現落雪效果,使用者必須讓滑鼠移動後才會觸發這次雪花特效。 自爆註:雖然我特別把飄雪的畫面截成圖一,不過你在讀這篇的時候應該也看得到飄雪的動畫才對,感覺自己好呆。)

降下雪花特效的啟用教學

第一種方式,不限定 WordPress,適用任何網站與網頁,包括 Google Blogger (Blogspot)。

在這個步驟中,你只需要開啟網頁程式碼的編輯器,在網頁上方的<head>…</head>之間放置(複製、貼上)下列程式碼即可。

<script src="https://www.vedfolnir.com/resource/javascript/snowstorm.js" type="text/javascript"></script>

之後當你開啟網頁時便會讀取該特效檔案,接著自動執行落下雪花的螢幕特效。 另外,程式碼也可以放置在網頁內碼最底部 </body> 之前,好處是可以延遲降雪程式的載入時間,盡量不去影響你原始網站的讀取速度。雖然這支雪花特效的程式已經非常小巧,不過能省一點是一點囉(鐵公雞性格上身)。

第二種方式,限定 WordPress,而且限時,只到明年一月四日為止。

這次雪花特效的原始來源是由 WordPress 套件 JetPack 有條件的提供。當你更新了最新的 Jetpack 後,你就能在 WordPress 後台設定中的「Setting」→「General」頁面找到如下圖二所示的功能選項:「Snow – Show falling snow on my blog until January 4th.」。 你只要在這邊勾選前方的確認方塊即可自動啟用雪花落下的特效應用。

Vedfolnir-WordPress-New-Function-Setting-Snow-Falling-Show-Check-Option
圖二,降雪,後台系統設定畫面。

要注意,因為第二種方法有時間條件的限制(Until January 4th, 2015),如果你跟我一樣喜歡這個降雪功能,請記得使用第一種啟用方式,網站頁面才會一直降下白雪哦!

 延伸閱讀
  1. 完整 WordPress 網站安裝心得教學與問題紀錄專用頁面
  2. 【WordPress】刪除佈景主題(Themes)教學(部落格後台設定與伺服器檔案管理)
分享這篇文章:

使用 Email 訂閱 最新消息不漏接

我們尊重您的隱私,隨時可取消訂閱。

留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *