Div層懸浮實現HTML5 Canvas背景動畫

qc1iu 發布于2019-08-02 11:54 / 3524人閱讀

摘要：在融合動畫的過程中，我并不想讓動畫占用網頁的版面，而是作為背景動畫。作為背景層進行動畫繪制，內容文字層懸浮在上面。簡化的代碼是這樣浮動在上的文字內容官方截圖到這里全背景動畫問題已經順利的解決了。

在日常的學習中我接觸到一些HTML5 Canvas動畫，在開發 tiomg.org 太美在線工具網站的時候，想將這些震撼或小清新的動畫融合到工具網站中，這樣可以使原本單調的網頁看起來豐富和更有設計感。

網站發布后，有程序開發的小伙伴和站長詢問怎么實現的，我也樂于分享將使用的開源組件和實現告訴大家。有些同學還是不太明白，我答應后面寫一篇博客來的。前幾個月一直focus在網站的一些新功能上和幫忙解決一些定制問題，今天才開始動手寫這篇博客來分享我的實現思路。

在本文中我將以本網站標志性的 Particleground粒子動畫（github）作為實例進行講解，如何進行實現。先貼出 Particleground官方demo （如下圖），讓大家對粒子動畫有個直觀的了解。這里也非常感謝Horia Dragomir貢獻了這個非常震撼的HTML5 Canvas動畫。

在融合HTML5 Canvas動畫的過程中，我并不想讓HTML5 Canvas動畫占用網頁的版面，而是作為背景動畫。正如你所看到的，官方的demo已經給出了這樣的例子，tiomg.org的登錄頁面也是這么去實現。canvas作為背景層進行動畫繪制，內容文字層懸浮在canvas上面。簡化的代碼是這樣：

官方demo html截圖：

到這里Canvas全背景動畫問題已經順利的解決了。但是在開發 tiomg.org 網站的時候，我有了一個更有趣的想法，我希望Canvas背景動畫不是占滿整個頁面的背景，而是頁面的一塊區域，高度是由子元素來決定，并且完全兼容bootstrap響應式設計。就像是我們常用的CSS背景圖片：background-image: url(bgimage.gif);，一般我們給父元素添加background-image，子元素（透明）撐開并決定父元素的大小。

HTML5

這里貼出HTML簡化代碼：


    
      
    
      浮動在canvas上的文字/內容

因為不能運行js代碼，我錄制了本地網頁的gif動圖代替實際效果。如果想自己本地看實際效果，你可以點擊實際效果展示及源碼下載。

GPU云服務器云服務器 html5背景懸浮 html5實現動畫懸浮層 div層

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53193.html

Div層懸浮實現HTML5 Canvas背景動畫

摘要：在融合動畫的過程中，我并不想讓動畫占用網頁的版面，而是作為背景動畫。作為背景層進行動畫繪制，內容文字層懸浮在上面。簡化的代碼是這樣浮動在上的文字內容官方截圖到這里全背景動畫問題已經順利的解決了。在日常的學習中我接觸到一些HTML5 Canvas動畫，在開發 tiomg.org 太美在線工具網站的時候，想將這些震撼或小清新的動畫融合到工具網站中，這樣可以使原本單調的網頁看起來豐富和更...

GHOST_349178 2019-08-29 17:09 評論0 收藏0
Div層懸浮實現HTML5 Canvas背景動畫

摘要：在融合動畫的過程中，我并不想讓動畫占用網頁的版面，而是作為背景動畫。作為背景層進行動畫繪制，內容文字層懸浮在上面。簡化的代碼是這樣浮動在上的文字內容官方截圖到這里全背景動畫問題已經順利的解決了。在日常的學習中我接觸到一些HTML5 Canvas動畫，在開發 tiomg.org 太美在線工具網站的時候，想將這些震撼或小清新的動畫融合到工具網站中，這樣可以使原本單調的網頁看起來豐富和更...

Ryan_Li 2019-08-23 12:44 評論0 收藏0
前端硬核面試專題之 CSS 55 問

摘要：前言本文講解道前端面試的的內容。文章原文地址前端硬核面試專題之問。前端硬核面試專題的完整版在此前端硬核面試專題，包含數據結構與算法。 showImg(https://segmentfault.com/img/bVbv2GE?w=900&h=400); 前言本文講解 55 道前端面試的 CSS 的內容。復習前端面試的知識，是為了鞏固前端的基礎知識，最重要的還是平時的積累！注意：文章...

崔曉明 2019-08-30 15:44 評論0 收藏0