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=