NodeJS+3D酷炫動畫玩轉純手工打造我的博客，不用博客框架
前言
那些優秀的程序猿，特別是大佬級別的開發者，都會有本身的我的博客網站。曾經有個老鐵跟我說，一個程序猿愛好者沒有屬於本身的博客，還不算真正進入咱們這個行當，用球迷的話來講，就是僞球迷。此言差矣，其實每一個人的追求不同。也多是精力有限爲了生計，不過藉助一些知名的社交平臺（
掘金、思否、CSDN、博客園、簡書、知乎、公衆號）也是不錯的選擇。但小編仍是但願小夥伴們能抽出一點點時間，擼一個出來。爲何要弄我的博客？javascript
爲何要弄我的博客？
創建知識體系
寫博客，能夠將你學的七零八碎的知識點整合到一塊兒，造成完整的我的筆記。這份筆記，記錄了你囫圇吞棗的內容，也記錄了你從理論到實踐的歷程。若是有一天，你想回顧這些知識點，對照着曾經記錄的筆記，會起到事半功倍的效果。css
那麼光是記錄筆記就能夠了麼？html
你還要把筆記分享出來，由於有人監督與無人監督的效果截然不同。若是是本身私下的筆記，可能不禁自主地會鬆上一口氣，每每作着作着就半途而廢以致於前功盡棄。就比如你能夠肆無忌憚在本身的房間裏自言自語，然而發佈朋友圈的時候卻每每謹小慎微，由於不是隻有你一我的能夠看到這些內容。你知道你的文章會被別人閱讀，天然要打起十二分精神盡心盡力，但願得到別人的承認。態度決定成敗，在別人「眼皮底下」寫做，更能拿出認真的精神氣兒。前端
若是以爲本身已經掌握某個知識點的時候，不妨寫一篇文章，若是能讓大部分讀者讀懂，說明這個知識點你掌握得還不錯。除此以外，讀者的點贊👍或評論，也是鼓勵你查漏補缺的突破口。java
總之，這些文章會成爲你珍貴的我的財富。💪node
養成寫做習慣
人每每是懶惰的，除非明天就會失業，否則很難會在今天狠狠逼本身一把。ios
寫我的博客的好處就在於：你老是緊繃着一根弦，不斷提醒本身，這個月還有一篇博客要寫，不能讓讀者們等急了。有壓力，纔有動力，不至於渾渾噩噩度日。nginx
提高我的品牌
堅持寫博客，你的影響力便不知不覺地滲透出去，「酒香也怕巷子深」，現代社會毫不能孤芳自賞。才華轉化爲影響力的那一瞬間，纔是你的價值所在。git
你的影響力越大，身邊的機會就越多。你的我的品牌，是你最好的「護城河」。github
快樂寫做
寫我的博客其實也是一件蠻快樂的事，一天之中可貴的放鬆機會，得以反思工做的得失。特別是將寫好的文章分享出去，自豪感油然而生。
讀者也能夠從中汲取營養，互惠互利，豈不樂乎？😋
迴歸主題
接下來實戰分享，因爲參考了一些官網的示例，以爲很不錯，本身就簡單的研究了一下，動手弄着玩玩。純手工打造酷炫我的博客網站，適配PC端和移動端。
我的博客演示地址👉：http://106.55.168.13:8888/
部分截圖
目錄結構
│ app.js // 入口文件
│ ecosystem.config.js // pm2默認配置文件 │ package.json // npm包管理所需模塊及配置信息 └─public │ favicon.ico // 圖標 │ index.html // 入口html文件 ├─assets // 存放公共文件夾 │ └─audios // 存放音頻MP3文件夾 │ └─css // 存放樣式文件夾 │ └─fonts // 存放字體文件夾 │ └─images // 存放圖片文件夾 │ └─js │ index.js // JS封裝公共方法文件 │ three.r112.js // JS三維模型庫 │ TweenLite.js // JS動畫庫 複製代碼
技術棧
-
NodeJS v10 -
Express v4.17 -
Normalize.css -
CSS3動畫 -
媒介查詢 -
Three.r112.js -
TweenLite.js -
nodemon -
pm2
功能模塊
-
頂部導航翻轉 -
首屏3D人物動畫 -
屏幕滾動視差效果 -
背景音樂 -
鼠標點擊首屏人物動效 -
博客欄目粒子動效 -
聯繫我欄目人羣穿梭動效
代碼實現
我的博客分三個欄目：關於我、技術博客、聯繫我。
準備工做
-
windows 10系統 -
下載安裝 nodejs v10+ nodejs.org/zh-cn/ -
代碼編輯器工具 Sublime Text 3 & VS Code
代碼實現
生成package.json文件
npm init -y
複製代碼
安裝nodemon & express
npm i -D nodemon npm i -S express 複製代碼
根目錄新建app.js文件
const express = require('express')
const app = express() // 設置靜態文件目錄 app.use(express.static(__dirname + '/public')) // 路由重定向 app.all('*', (req, res) => { res.redirect(302, '/'); }) // 監聽8888端口 app.listen(8888, () => { console.log('服務啓動成功 http://localhost:8888') }) 複製代碼
http-server構建本地服務替代Express
npm i http-server -g
複製代碼
-
啓動服務
http-server -c-1 -p 8888
複製代碼
-
關閉服務
快捷鍵Ctrl+C
複製代碼
入口html引入如下文件
項目中引入對應的Normalize.css、Three.r112.js、TweenLite.js等css和js文件。
-
Normalize.css
Normalize.css 只是一個很小的css文件，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比於傳統的css reset，Normalize.css是一種現代的，爲HTML5準備的優質替代方案。Normalize.css如今已經被用於Twitter Bootstrap，HTML5 Boilerplate，GOV.UK，Rdio，CSS Tricks以及許許多多其餘的框架，工具和網站上。
-
Three.js
Threejs 是一款運行在瀏覽器中的 3D 引擎，你能夠用它建立各類三維場景，包括攝影機、光影、材質等各類對象。你能夠在它的主頁上看到許多精彩的演示。
Threejs 是一個讓用戶經過javascript入手進入搭建webgl項目的類庫。衆所周知學習webgl須要圖形學知識，而webgl須要經過js和glsl兩種語言。若是咱們不經過threejs使用webgl勢必逃不過底層知識:你必須全面瞭解着色器語法和本身編寫頂點着色片元着色；但你使用了threejs顯然能夠便捷的逃過這些難懂的底層，對於傳統js從業人員挑戰的shader確實是有難度的。
快速上手threejs須要什麼基礎？
-
對於3D美術知識的瞭解 -
對於Javascript的能力以及OOP程序開發能力，遊戲開發能力
-
TweenLite.js
TweenLite 是一個很是快速、輕量級和靈活的動畫工具，它是GreenSock動畫平臺(GSAP)的基礎。TweenLite實例處理隨時間推移對任何對象(或對象數組)的一個或多個屬性進行漸變。TweenLite能夠用最小的文件大小來完成大部分的動畫任務，或者它能夠與先進的排序工具(如TimelineLite或TimelineMax)一塊兒使用，使複雜的任務變得更簡單。
如需瞭解更多詳情請移步到對應的官網，以上樣式庫和JS庫都有提供官網地址。小編只是瞭解，這裏就不班門弄斧了。
主頁index.html代碼以下：
<!DOCTYPE html>
<html class="no-js wf-loading is-en" lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="theme-color" content="#0c0720" /> <meta name="msapplication-TileColor" content="#da532c" /> <meta name="theme-color" content="#ffffff" /> <link rel=icon href=/favicon.ico> <title>JackChen我的官網</title> <meta name="description" content="blog is a real-time, development focussed, creative studio." /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=no" /> <script> // 判斷手機端或PC端 var ua = (navigator.userAgent || navigator.vendor || window.opera).toLowerCase(); document.documentElement.className += /(iPad|iPhone|Android)/i.test(ua) ? ' is-mobile' : ' is-desktop'; document.documentElement.className = document.documentElement.className.replace('no-js','js'); var supportedLangs = ['en', 'cn']; var lang = 'en'; </script> <link rel="stylesheet" href="/assets/css/index.css" /> </head> <body> <canvas id="canvas"></canvas> <div id="app"> <div id="main" data-scroll-tooltip="Scroll to begin"> <div id="main-scroll"> <div id="page-container"> <main id="about" class="page is-about" data-id="about" data-page-id="about" data-url="about" data-title="JackChen我的官網"> <section id="about-hero" class="hero is-full"> <div id="about-hero-context" class="hero-context flex-vertical"> <div class="hero-inner"> <h1 id="about-hero-title" class="hero-title flex-vertical">Hello, I am JackChen</h1> <h4 id="about-hero-desc" class="hero-desc flex-vertical">認真作好每個細節，用心寫好每一段代碼</h4> </div> </div> </section> <section id="about-blog" class="is-full margin-bottom-full"> <div id="about-blog-context" class="sec-context flex-vertical"> <div class="sec-context-inner is-right darker-bg"> <h3 id="about-blog-title" class="about-sec-title font-header"></h3> <h4 id="about-blog-subtitle" class="about-sec-subtitle font-header">我的信息</h4> <div id="about-blog-desc" class="about-sec-desc"> 我是<b>「JackChen」</b>，很幸運成爲80後，座標湖南省長沙縣，一名很是熱愛學習的<b>「高級前端開發工程師」</b>。有着不平凡的工做經歷，讓我對本身的人生方向更加堅決，由於本身的興趣而踏足前端，是一件讓我畢生難忘的事情。 <br /> <br /> <b>「學習和寫做」</b>是目前惟一天天都能堅持完成的事情，業餘時間的我，喜歡寫做和分享。我運營着本身的公衆號<b>「懶人碼農」</b>和有着一羣喜歡閱讀我文章的讀者，天天最大的快樂就是能和各位同窗一塊兒交流學習一塊兒共同進步。 </div> </div> </div> </section> <section id="about-services" class="is-full"> <div id="about-services-context" class="sec-context flex-vertical"> <div class="sec-context-inner is-right darker-bg"> <h3 id="about-services-title" class="about-sec-subtitle font-header">自我評價</h3> <h4 id="about-services-subtitle" class="about-sec-title">1. 熱愛學習，工做認真，心思細膩，樂於溝通，服從安排。<br>2. 有輕微代碼潔癖，追求編碼細節和代碼規範，認真寫好每一行代碼。<br>3. 擁有紮實的前端基礎，擅長基於JavaScript開發各類Web應用和Node應用。<br>4. 幾年工做都在電商、汽車、文娛、區塊鏈等行業的大中廠，對大中公司的產品開發流程有必定的瞭解。</h4> <div id="about-services-items"> <div class="about-services-item"> <div class="about-services-item-title font-bold">發現</div> <ul class="about-services-subitems nav"> <li class="about-services-subitem">我的能力</li> <li class="about-services-subitem">團隊精神</li> <li class="about-services-subitem">目標管理</li> </ul> </div> <div class="about-services-item"> <div class="about-services-item-title font-bold">標籤</div> <ul class="about-services-subitems nav"> <li class="about-services-subitem">執行力</li> <li class="about-services-subitem">責任心</li> <li class="about-services-subitem">自驅動</li> </ul> </div> <div class="about-services-item"> <div class="about-services-item-title font-bold">愛好</div> <ul class="about-services-subitems nav"> <li class="about-services-subitem">學習</li> <li class="about-services-subitem">閱讀</li> <li class="about-services-subitem">寫做</li> </ul> </div> </div> </div> </div> </section> <div class="is-full"></div> </main> </div> <div id="featured"> <div id="featured-context" class="sec-context"> <div class="sec-context-inner"> <h3 id="featured-title" class="sec-title font-header">精選文章</h3> <div id="featured-desc" class="sec-desc font-bold">「懶人碼農」公衆號做者，實戰開發者，支持文章投稿及相互開白名單。一切技術問題，都要服從產品交付和市場反饋。</div> </div> <div id="featured-items-container"> <div class="featured-item" data-id="img-1"> <a class="featured-item-link" href="https://juejin.im/post/5ef0a38af265da0291786b6e"> <div class="featured-item-image"> <div class="featured-item-image-inner"></div> </div> <div class="featured-item-context is-white-content" data-base-color="#00f"> <div class="featured-item-desc font-header-bold split-line-mask-effect">NodeJS全棧開發一個功能完善的Express項目（附完整源碼）</div> <div class="featured-item-client split-line-mask-effect">NodeJS全棧入門</div> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 8 8"> <polygon points="6.767 0.603 6.767 5.897 0.871 0 0 0.872 5.894 6.767 0.605 6.767 0.605 8 8 8 8 0.603 6.767 0.603" /> </svg> </div> </a> </div> <div class="featured-item" data-id="img-2"> <a class="featured-item-link" href="https://juejin.im/post/5efca542f265da22c058d8ed"> <div class="featured-item-image"> <div class="featured-item-image-inner"></div> </div> <div class="featured-item-context is-white-content" data-base-color="#00f"> <div class="featured-item-desc font-header-bold split-line-mask-effect">Vue+Echarts構建大數據可視化酷炫展現公司品牌實戰項目分享（附源碼）</div> <div class="featured-item-client split-line-mask-effect">大數據可視化平臺</div> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 8 8"> <polygon points="6.767 0.603 6.767 5.897 0.871 0 0 0.872 5.894 6.767 0.605 6.767 0.605 8 8 8 8 0.603 6.767 0.603" /> </svg> </div> </a> </div> <div class="featured-item" data-id="img-3"> <a class="featured-item-link" href="https://juejin.im/post/5f01b5325188252e6e15095c"> <div class="featured-item-image"> <div class="featured-item-image-inner"></div> </div> <div class="featured-item-context is-white-content" data-base-color="#00f"> <div class="featured-item-desc font-header-bold split-line-mask-effect">開發一款微信小程序的個性簡歷，能打開大廠之門並得到門票？（附源碼）</div> <div class="featured-item-client split-line-mask-effect">微信小程序</div> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 8 8"> <polygon points="6.767 0.603 6.767 5.897 0.871 0 0 0.872 5.894 6.767 0.605 6.767 0.605 8 8 8 8 0.603 6.767 0.603" /> </svg> </div> </a> </div> <div class="featured-item" data-id="img-4"> <a class="featured-item-link" href="https://juejin.im/post/5ef8a8ed6fb9a07e944ed6d6"> <div class="featured-item-image"> <div class="featured-item-image-inner"></div> </div> <div class="featured-item-context is-white-content" data-base-color="#00f"> <div class="featured-item-desc font-header-bold split-line-mask-effect">2020值得收藏與學習280多款H5小遊戲，從入門到完全瞭解它（附源碼）</div> <div class="featured-item-client split-line-mask-effect">H5小遊戲</div> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 8 8"> <polygon points="6.767 0.603 6.767 5.897 0.871 0 0 0.872 5.894 6.767 0.605 6.767 0.605 8 8 8 8 0.603 6.767 0.603" /> </svg> </div> </a> </div> <div class="featured-item" data-id="img-5"> <a class="featured-item-link" href="https://juejin.im/post/5f05c351f265da22fe241ade"> <div class="featured-item-image"> <div class="featured-item-image-inner"></div> </div> <div class="featured-item-context is-white-content" data-base-color="#00f"> <div class="featured-item-desc font-header-bold split-line-mask-effect">Vue+Express+Webpack自建腳手架完善單頁面應用，檔次瞬間提升（附完整源碼</div> <div class="featured-item-client split-line-mask-effect">NodeJS全棧進階</div> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 8 8"> <polygon points="6.767 0.603 6.767 5.897 0.871 0 0 0.872 5.894 6.767 0.605 6.767 0.605 8 8 8 8 0.603 6.767 0.603" /> </svg> </div> </a> </div> </div> </div> </div> <div id="contact"> <div id="contact-main"> <div id="contact-context" class="sec-context flex-vertical"> <div class="sec-context-inner darker-bg is-left"> <h4 id="contact-title">聯繫我😃</h4> <div id="contact-desc">據說你在找我哦，👉明智的選擇👍</div> <div id="contact-columns"> <div class="contact-column"> <div class="contact-column-title font-bold">聯絡</div> <ul class="nav"> <li class="contact-column-item">手機：13787081615</li> <li class="contact-column-item">郵箱：278910933@qq.com</li> <li class="contact-column-item">Q<span style="padding-left: 8px;"></span>Q：278910933</li> <li class="contact-column-item">微信：13787081615</li> </ul> </div> <div class="contact-column"> <div class="contact-column-title font-bold">社交</div> <ul class="nav"> <li class="contact-column-item"><a href="https://github.com/jackchen0120" target="_blank" rel="noreferrer">Github</a></li> <li class="contact-column-item"><a href="https://user-gold-cdn.xitu.io/2020/7/5/1731eb762d539047?imageslim" target="_blank" rel="noreferrer">公衆號</a></li> <li class="contact-column-item"><a href="https://juejin.im/user/5eafd5fff265da7be959f56a/posts" target="_blank" rel="noreferrer">掘金</a></li> <li class="contact-column-item"><a href="https://blog.csdn.net/qq_15041931" target="_blank" rel="noreferrer">CSDN</a></li> </ul> </div> </div> <div class="clear-fix"></div> </div> </div> </div> <footer id="contact-footer"> <div id="contact-footer-copyright" class="font-subheader"> © 2020-2025 微信公衆號@懶人碼農 All Rights Reserved. </div> </footer> </div> </div> </div> <div id="main-scrollbar"> <div id="main-scrollbar-indicator"></div> </div> <div id="menu"> <canvas id="menu-canvas"></canvas> <div id="menu-content" class="flex-vertical"> <ul id="menu-menu" class="nav"> <li class="menu-menu-item is-about"><a href="/about">關於我</a></li> <li class="menu-menu-item is-blog"><a href="/blog">技術博客</a></li> <li class="menu-menu-item is-contact"><a href="/contact">聯繫我</a></li> </ul> <div id="menu-lang-selector"></div> </div> </div> <header id="header" class="font-subheader cache"> <div id="header-content"> <a aria-label="homepage" href="/about" id="header-logo">JackChen</a> <ul id="header-menu" class="nav"> <li class="header-menu-item header-item is-contact"> <a aria-label="contact" href="/contact"> <div class="header-menu-item-mask">聯繫我</div> </a> </li> <li class="header-menu-item header-item is-blog"> <a aria-label="blog" href="/blog"> <div class=