很酷的網頁特效 canvas-nest.js
💻

很酷的網頁特效 canvas-nest.js

Tags
Web
2021
Published
Published October 27, 2021

前言

在寫自己的網頁的時候,發現網頁有點過於單調,所以就想說來找一個酷一點的動態圖片或是 GIF 當作背景,在尋找的時候發現了這個酷東西 canvas-nest.js (這是作者的 code),其實就是一個會在網頁最下層 (z-index = -1) 跑出幾何圖形的特效,然後那些幾何圖形會一直被滑鼠鼠標匯集起來。
直接看圖。
notion image

cavas-nest.js 的優點

  • 作者自己說了,他們有以下幾個優點:
    • 它不依賴 jQuery,使用原始的 Javascript
    • 檔案小,只有 2Kb
    • 配置很簡單
    • 你不必是一個網頁開發人員也可以容易的使用它
    • 模組化的區域渲染

配置方式

  • 對,就是那麼簡單,只要把下面那一段 <script> 貼在網頁的 </body> 前一行即可
    • <script color="0, 0, 0" pointColor="0, 0, 0" opacity="0.4" count="150" src="<https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.js>" type="text/javascript" charset="utf-8"> </script>
善意提醒:不要把 <script> 貼在 <head></head> 之間,會導致無法運作
  • 參數介紹
    • color:線條的顏色,後面接的三個數字分別是 R, G, B。默認設定為黑色
    • pointColor:頂點的顏色,後面接的三個數字分別是 R, G, B。默認設定為黑色
    • opacity:線條的不透明度 (01,數值越不透明)。默認設定為 0.5
    • count:線條的數量。默認設定為 99,建議不要設定過高,以免影響網頁載入的順暢度
    • zIndex:背景的 z-index 屬性。默認設定為 1

小型裝置隱藏特效的方法

這裡另外提供一個想要在小型裝置隱藏這個特效的方法給各位,因為在小型裝置上如果有這個特效在背景,看了真的很礙眼,如果是看技術文章的話,也挺痛苦的。然後,我找了很久發現作者沒有另外提供這個 API 給使用者作調整,然後我從網路上找了很多方法,都沒有看到解決辦法,連對岸堪稱最強的專業開發者社群 CSDN 都沒有,後來只好自己想辦法。啊,完成後發現其實也沒有很難,只是從前端介面挖到 CSS selector 而已。

解決辦法

  1. 先把上面那一段 <script> 丟到你的網頁上
  1. 按下鍵盤的 F12 開啟開發人員工具 (Mac 使用者按下鍵盤 Command + Option + I)
  1. 我們可以從網頁原始碼找到這行大概就是上面那一段 <script> 的內容
    1. notion image
  1. 從上述網頁原始碼我們可以得知這個特效的 CSS selector 如下:
      • Type selector:canvas
      • ID selector:c_n3 (每個人網頁 selector 名稱不同,不一定跟我一樣是 c_n3,把下面的 c_n3 換成你找到的 selector 名稱即可)
  1. 我的建議是,如果你的網頁沒有其他地方使用到 canvas 這個 Type selector 的話直接用 canvas 當作 Selector 即可;如果其他地方還有用到 canvas 的話那就使用 ID selector c_n3
  1. 將下方 script 加到 <style></style> 之間即可完成
      • 使用 canvas 當作 selector
        • @media (max-width: 576px) { canvas { display: none; } }
      • 使用 c_n3 當作 selector (每個人網頁 selector 名稱不同,不一定跟我一樣是 c_n3,把下面的 c_n3 換成你找到的 selector 名稱即可)
        • @media (max-width: 576px) { #c_n3 { display: none; } }

成果展示

  • 大型顯示器 (保留特效)
    • notion image
  • 小型顯示器 (移除特效)
    • notion image