学院官网页面源码效果炫酷

 # 深度映像工作室官网首页 链接：[https://zamhown.github.io/divs-homepage](https://zamhown.github.io/divs-homepage) 这个项目是我在2017年的本科毕业设计的一部分，当时是给学院里的媒体工作室做了个官网，还包括一个 ASP.NET MVC 实现的作品管理系统和交流社区。 > 深度映像工作室是我们学校的一个学生组织，主要业务是拍视频、视频后期处理和平面设计，以实践教学为宗旨（并以揽私活维持生计），所以官网的首页部分需要做得炫酷一点。想当年为了答辩租了两个月服务器，一月120，还是有点小贵的。毕业以后由于没人续费，这个官网和整个作品社区就凉了……这次我把首页部分单拎了出来，用webpack优化了一遍传到了GitHub Pages。虽然是静态的，但终于有一个永久免费的服务器了。 这次趁热把以前的东西总结了一下，不然又会像这次一样一上手什么都忘了。先列举下该页面主要用到的技术： - 响应式设计与浏览器兼容 - 视频播放的控制（懒加载、loading进度条等） - 将AE动画转化为svg动画在网页上播放 - canvas动画 - 自定义字体、拆分字体文件 - 引入单文件方式使用Vue - 用Webpack进行打包、图片压缩等 - 模块按需进行懒加载 总结的点比较多，也比较细碎杂乱，大家可以通过目录，各取所需。 ## 目录 **第一部分 响应式设计与浏览器兼容** [一、概览](#一概览) [二、响应式设计](#二响应式设计) [三、浏览器兼容](#三浏览器兼容) **第二部分 效果实现与优化** [四、视频部分](#四视频部分)     [4.1  视频的动态加载](#41视频的动态加载)     [4.2  视频的加载进度条](#42视频的加载进度条) [五、Lottie动画部分](#五Lottie动画部分) [六、Canvas动画部分](#六Canvas动画部分) [七、自定义字体与拆分字体](#七自定义字体与拆分字体) [八、其他效果与彩蛋](#八其他效果与彩蛋) **第三部分 Webpack配置、打包与懒加载** [九、Webpack与各loader配置](#九Webpack与各loader配置)     [9.1  打包js文件](#91打包js文件)     [9.2  将ES6以上的语法转译为ES5](#92将ES6以上的语法转译为ES5)     [9.3  打包HTML文件（一）](#93打包HTML文件一)     [9.4  打包CSS文件](#94打包CSS文件)     [9.5  优化JS和CSS文件](#95优化JS和CSS文件)     [9.6  打包图片和其他资源文件](#96打包图片和其他资源文件)     [9.7  打包HTML文件（二）](#97打包HTML文件二)     [9.8  其他配置](#98其他配置) [十、开发环境配置与拆分](#十开发环境配置与拆分)     [10.1  配置拆分](#101配置拆分)     [10.2  开发服务器配置](#102开发服务器配置)     [10.3  模块热替换配置](#103模块热替换配置) [十一、模块懒加载](#十一模块懒加载) [十二、其他减少请求数和压缩资源大小的方法](#十二其他减少请求数和压缩资源大小的方法) ## 一、概览 我们先整体地看一下成品页面。首先，在PC端第一屏是一个全景视频做背景（工作室作品《It's Time》的节选），Logo和主菜单放在上方左右侧。  向下拉进入第二屏时，全景视频逐渐变暗，Logo和主菜单部分变黑并形成一个Header。第二屏是“作品”部分，最左边的作品通过svg动画（lottie-web库）自动预览，右上方的作品当鼠标移入就使用视频模式预览。  下面是“关于我们”部分，有一段中规中矩的文字展示，鼠标移入合影会触发css强调动画。  再下面是“团队”，有六位成员的照片和简介。如果鼠标不移入这一部分，成员简介将随机展示；如果鼠标移入其中一张照片，则展示对应成员的简介，并停止随机展示。展示简介时，成员照片呈现毛玻璃和下陷效果。画面左边斜线填充的矩形会随着滚动条进行相对微动。  最后是“联系”部分。背景仍为第一屏的视频，但是叠加了一层铁丝网一样的效果，画面也更加黯淡。前景左部是Logo和联系方式，右部是简易留言板。鼠标移到“向我们留言”按钮时会有一个hover效果。  ## 二、响应式设计 众所周知，只用考虑PC端，并且只考虑Chrome浏览器的前端项目是幸福的。然而幸福往往非常珍贵，因为我们往往要考虑所有主流环境，特别是做一个有宣传作用的官网。如今随着各种智能设备的发展，面对如此千差万别的屏幕分辨率，为每种设备专门做一套网页的做法早已不符合时代的需要。这时，催生了**响应式网页设计**（Responsive Web Design）的概念。 响应式网页设计的理念是：Web页面应当根据用户的行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行对应的调整。换句话说，页面应该有能力去自动响应用户的设备环境。 在技术上，响应式网页设计通常采用css媒体查询、JavaScript的屏幕分辨率监测、css的流动布局及百分比布局、弹性图片、以及css3新增的[弹性盒子布局（Flexible Box Layout）](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)和[网格布局（Grid Layout）](https://css-tricks.com/snippets/css/complete-guide-grid/)来实现。目前也有许多前端框架和组件库可以做到这一点，从最老派的Bootstrap到最新潮的Ant Design都有响应式支持。 在效果上，我希望当用户在PC上慢慢调整浏览器宽度时，页面可以流畅地改变布局。以“关于我们”为例，有针对PC宽屏、PC普通屏、平板、手机四种宽度下的四种布局：  *缩窗口大法，事实上我经常这样盘网页* 为了能在浏览器宽度改变时让网页版式进行平滑的变化，除了媒体查询以外，可以试试css3的[transition属性](http://www.w3school.com.cn/css3/css3_transition.asp)，它能自动给元素的样式改变加上过渡动画，非常傻瓜式的操作。还记得第一次接触transition的时候简直改变了我对css的看法。 一般情况下，当你在PC端把任意宽度的版式做好，那么平板和移动端已经完成一半了。我们之后只需要针对不同平台进行优化就好。但是很明显，移动端和PC端差异极大，体现在分辨率和交互方式（鼠标或触摸）上，因此不得不处理一些繁琐的细节。 为了在js里判断用户设备类型，我使用了[device.js](https://github.com/matthewhudson/current-device)库。它可以用来检测设备的操作系统（比如 iOS，安卓，黑莓，Windows，Firefox OX），方向（横屏或者竖屏），类型（平板或者