知乎登錄/註冊頁之動態背景

知乎登錄頁的動態背景是使用particles.js庫實現的。

背景色

知乎使用的背景顏色太淺了，我相信不止我一個人會認為是不是我的屏幕髒了？

我將css代碼中的background: #f7fafc替換成background: #6daeda後，效果就很明顯了：

particles元素

因為知乎是把particles.js作為背景展示的，所以設置了如下的css屬性：

#particles { position: absolute; top: 0; z-index: -1; width: 100%; height: 100%}

這裡用了絕對定位，並且把particles元素放到最底層。不過，我更傾向於把particles元素放到最頂層，但是不響應任何事件。看上去更好玩一些~

#particles { position: absolute; top: 0; z-index: 999; pointer-events: none; width: 100%; height: 100%;}

canvas畫布

particles元素下包含了一個canvas畫布，在css中設定了display屬性：

#particles canvas { display: block}

並且使用了行內css的方式設置了width和height均為100%:

<canvas class="particles-js-canvas-el" stylex="width: 100%;height: 100%;" width_="1423" height="810"></canvas>

在我的Chrome(54)和Firefox(50)環境下，canvas元素的默認display屬性值都是inline，那麼問題來了，為什麼這裡要設置canvas的顯示為block?

通過測試我們發現，去掉display: block後就會出現垂直滾動條，加上該css後就不會顯示垂直滾動條。

在stackoverflow中有如下解釋：

It』s because of the 1px borders on each side of the element.

100% + 2px border(s) != 100%.

如何解決高度100%的情況下仍然顯示滾動條的問題呢？有以下幾種方法：

• 使用calc()減去2px：

  height: calc(100% - 2px);

• 設置元素的display屬性值為block

  display: block

  很明顯第一種寫法不如第二種寫法更簡約。

更多參考資料：

• html5-canvas-100-width-height-of-viewport
• html-css-remove-vertical-scroll-with-height-100
• Canvas should be display block to remove scrollbars

particlesJS參數

particlesJS完整參數見codepen，我把知乎登錄頁使用的參數和官方示例做了對比，主要改動部分如下：

1. 修改粒子的 數量/顏色/大小，連接線的 距離/顏色/透明度/寬度

   

   

2. 修改粒子移動的 速度/隨機性

   

3. 設置 不開啟onhover和onclick事件

   

interactivity參數中還有一些不同，但是既然已經關閉了onhover和onclick事件，其他的參數設置與否都不起作用了。

總結

particles.js庫可以做出各種酷炫的效果，在知乎登錄頁面中，內容的優先順序要比背景的優先順序要高很多，如果背景太顯眼了反而會喧賓奪主。

更多酷炫particle.js示例，請點擊下述codepen鏈接：

• Official demo
• lightbulb + particles + blending mode
• Moar Plasma
• particles snow

?
推薦閱讀：