前端开发参考网站

一、关于首屏视频播放

http://designmodo.com/startup/

感官体验：科技感，高大上，酷

综合评价：如页面请求不多且视频占空小的情况下使用。一般为首屏轮播图的情况下使用，前两张轮播为图片，最后为视频，多给视频一些加载时间。还有就是非首屏使用。

推荐指数：★★★☆☆

二、Hover时实现图片随着鼠标方向而变动

http://atieva.com/

https://labs.invisionapp.com/

http://www.gv.com/

https://studiorotate.com/

http://www.trainrobber.com/

http://makeitbright.diadora.com/

http://2016.makemepulse.com/

感官体验：新颖独特，画龙点晴般灵动，增加页面生机，互动感强，再配上相应的音乐，可使用户停留时间加长，比如现在天猫超市的一些网站都加入与自己品牌风格相符的music。

页面某处的小细节加上些微动效，体验效果最佳，如http://atieva.com/按钮Hover效果。

综合评价：单色色块叠加(正片叠底)到图片之上，加载速度快，互动性强。页面干净整洁，简单的文字加留白使整个页面较高雅，

推荐指数：★★★★★

三、svg线条与色块实现图形特效

https://research.google.com/

感官体验：新鲜有趣

综合评价：使用svg技术实现一些线条，色块之间的动态效果，加载速度较快，可用SVGDeveloper进行绘制。

推荐指数：★★★★★

四、页面上一些游走小色块

http://designerbundle.com/

http://www.lab21.gr/

感官体验：无论是单色，多色色块，大小，颜色，位置随机飘浮展示，顺间为页面提升了生机。

综合评价： 全部由代码编写，加载速度快，推荐。

推荐指数：★★★★★

五、页面滚动到元素位置时的一些加载动画效果

http://bundy.madebywild.com/

http://www.details.ch/

http://dagobert.com/

http://elespacio.net/info

感官体验：滚到相应元素时，不同切入效果。适当为图片，按钮，文字添加一些hover效果，会提升页面的交互性。

综合评价： 全部由代码编写，加载速度快，推荐。 现在很流行这种写法。

推荐指数：★★★★★

六、页面加载时Loading效果

https://chekhov.withgoogle.com/alive#about

https://www.don-guri.com/

http://inspacewetrust.org/en/

http://tolia.ge/

感官体验：页面初始化加载请求资源的同时，loading效果可以做的较生动有趣，可以使访问者更加多的耐心去等待。

极力推荐类似色块与线条化设计 方式，因不用加载图片等资源，固加载速度快，超出平常体验感。

综合评价： 如果页面请求或图片资源较多，可加类似效果。很鼓励类似新颖且独特的色块与线条化设计

推荐指数：★★★★★

七、不一样的Loading方式与导航栏呈现

http://exhibitions.guggenheim.org/zero/

http://www.spotify-valentines.com/

感官体验：一般loading百分比都是正序，而这个是倒序方式，从100-0递减的过程，之后有个白色抖动的小球一直放大放大，感觉要蹦出屏幕似的，还以为是个bug呢，完全覆盖屏幕后显示一个大时钟导航栏。

综合评价：带有丝丝恐惧感的加载方式，好有趣。

推荐指数：★★★★★

八、简单明了首屏配图+大文字+微动效

http://www.riiotlabs.com/en/home

感官体验：页面初始化加载请求资源的同时，loading效果可以做的较生动有趣，可以使访问者更加多的耐心去等待。

综合评价： 如果页面请求或图片资源较多，可加类似效果。

推荐指数：★★★★★

九、较酷炫的首屏加载

https://baconclubhouse.no/en

http://www.wearetopsecret.com/

感官体验：页面初始化加载请求资源的同时，loading效果可以做的较生动有趣，可以使访问者更加多的耐心去等待。

综合评价： 如果页面请求或图片资源较多，可加类似效果。

推荐指数：★★☆☆☆

十、巧妙引入正文

https://chekhov.withgoogle.com/alive#about

感官体验：简单的色块引入，互动下便可分出导航到，生动有趣

综合评价： 将loading效果与首页联系到一起，缩短了页面加载时间，同时也使导航栏变得更加新颖独特；

推荐指数：★★★★★

十一、渐变色+背景色块动态引入

http://www.fibersensing.com/

http://www.lahautesociete.com/

感官体验：简单的色块引入，互动下便可分出导航到，生动有趣

综合评价： 将loading效果与首页联系到一起，缩短了页面加载时间，同时也使导航栏变得更加新颖独特；

推荐指数：★★★★★

十二、特炫CSS3动效

http://species-in-pieces.com/#

感官体验：利用不同颜色的色块将一些濒临灭绝的动物绘制出来，呼吁人们去保护动物。

综合评价： 通过色块变形拼接出来动物的形状，并将其动效特征描绘出来。

推荐指数：★★★★★

十三、首屏高度适应屏幕100%展示

感官体验：简单的色块搭配or纯色背景or一张清晰的大图是现在较流行的网页表现方式

综合评价： 简单明了，干净整洁是其最主要的风格

推荐指数：★★★★★

十四、使用动态切换导航栏

http://www.dogstudio.be/

感官体验：展示方式较强，间接的方式将页面呈现给访问者

综合评价： 将方位与鼠标hover完美的结合在一起，同时利用不同的颜色做为区分模块，加上导航栏每隔2秒自动切换，给用户一种新鲜的体验感。

推荐指数：★★★★★

十五、繁星闪闪，基于Canvas绘制

http://www.jq22.com/yanshi4374

http://metting.moxz.cn/views/

http://www.plasticbcn.com/

http://void.hi-res.net/hires

http://www.deutser.com/

http://lab.hakim.se/wave/03/

http://personalbrandinstitute.com/

http://dataveyes.com/#!/en

感官体验：超级炫酷的动效，通过互过+娱乐的方式展示

综合评价：开发难度较大，略显繁乱。

推荐指数：★★☆☆☆

十六、首屏下雨效果

http://www.yyyweb.com/demo/rainy-day/

感官体验：根据相应的场景，加上雨点微点缀会让人身临其境

综合评价：看着比较好玩

推荐指数：★★★★☆

十七、简单大标题+缓动背景

http://beta.rallyinteractive.com/

http://browser.qq.com/?adtag=SEM5

感官体验：简单明了的标题，首屏以100%高度展示，背景色块微微缓动。

综合评价：看着比较好玩

推荐指数：★★★★☆

十八、超简洁文字+色块，极力推荐类似的

http://melanie-f.com/en/

感官体验：简洁明了，背景微元素动态效果，随着页面的滚动，元素依次下滑微动显示。

综合评价：页面效果超赞，动效也很好玩，类似咱们设计中心官网，随机动态生成小图片那块。加载速度快，体验效果佳。

推荐指数：★★★★★

十九、局部动效+时尚背景

http://www.jesuisunicq.com/

http://mux.baidu.com/

感官体验：哪怕页面有一个动效元素，瞬间也会使页面生动起来

综合评价：利用图片切换，使其变得朴树迷离

推荐指数：★★★★★

二十、SVG矢量图形引入首屏加载

http://www.nerisson.fr/

感官体验：n多色块组成的小图形+微动态是现在很流行的一种表现方式

综合评价：轻量极加载模式，在减少请求的同时也减少了空间资源

推荐指数：★★★★★

二十一、页面滚动时变换不同的图形

http://sendamessage.to/

http://www.fontwalk.de/03/

感官体验：随着页面的滚动，实现图形的变换合成等效果

综合评价：建议用矢量色块或者小图片文字结合，可使页面加载更快些。

推荐指数：★★★★★

二十二、方位与滚屏结合起来

http://shakerbrand.com/

http://lamoulade.com/#!/home

感官体验：将鼠标hover方位与滚动结合起来，

综合评价：利用svg向下顺移图片，并指引

推荐指数：★★★★★

二十三、淡淡的首屏背景，花式切换轮播

http://jovaconstruction.com/

感官体验：新鲜有趣，高端优雅，滚动时首屏渐渐模糊，逐一淡出线条文字信息。

综合评价：根据window.onscroll事件进行一系列的动态加载，较独特，且加载较快。

推荐指数：★★★★★

二十四、巧妙运用色块整合文字

http://www.risotteriamelottinyc.com/

感官体验：同样利用scroll事件，为要点内容添加背景底色以突出

综合评价：往往页面中一那么一点不寻常就会给人带来以惊喜感，很赞的想法

推荐指数：★★★★★

二十五、利用好hover效果，使页面灵动起来

http://twofold.com/

http://kenjiendo.com/

感官体验：超级超级酷的体验，在超级简洁的页面上，用户hover或者滚动时，给予不同的反响，那么对于我来说，这网站细节做的就很好。

综合评价：极力推荐这种从细节做起，从一个按钮的hover状态，以及hover消失时之间图形的变换，如果这些细节做到了，那么就是一个成功的网站。

推荐指数：★★★★★

二十六、推崇极简风格，与MUJI风格相似

http://kalpakian.fr/#/projets

感官体验：所有文字信息左边显示，图片右边展示。底色选用淡淡渐变的灰，产品详情页以弹窗方式呈现，利用不完整图形展示出来。

综合评价：淡淡的底色配以淡淡的图形，再加白色的文字，瞬间使产品提升了一个档次，详情页更是以不同寻常的矩形，一个三角形的缺失，却给页面带来了艺术气息。

推荐指数：★★★★★

二十七、极酷的页面体验，超牛的Canvas

http://www.acnplwgl.com/

http://pablotheflamingo.com/

http://www.makemepulse.com/

http://thecolorsofmotion.com/films/up

http://thecolorsofmotion.com/

http://www.offpixel.co/

http://claudiocalautti.cc/

http://www.shanemielke.com/archives/usopen-sessions/

感官体验：带有利用canvas将图形以马赛克方式显示，并随机消除马赛克，同样详情页也会先以马赛克方式展示，之后再显示清晰图片。

综合评价：体验方式很好，但实现起来并没那么简单，可能很难。

推荐指数：★★☆☆☆

二十八、循环自动放大背景图片

http://www.andy-wolf.com/awe/#/

感官体验：将背景自动循环放大1-1.5倍，稍同点缀下。

综合评价：很微妙的体验。

推荐指数：★★★☆☆

二十九、强大的Canvas—— 色值大全

http://thecolorsofmotion.com/

感官体验：将背景自动循环放大1-1.5倍，稍同点缀下。

综合评价：很微妙的体验。

推荐指数：★★★☆☆

三十、异形背景色块使网页更灵动

http://panizzon.ind.br/panizzon/public/

http://roguesocietygin.com/

感官体验：首屏用svg勾勒出图形边缘后，再显示图片，内容背景用不同的异形做为背景，及hover互动效果。

综合评价：整个页面写的非常棒，配色也很好。无论颜色还是交互看起来很都很有趣，值得学习。

推荐指数：★★★★★

三十一、背景动效

https://leancloud.cn/

感官体验：利用多边形展示出不同的形态，给人以深不可测感。同时也体验了团队的强大性吧。

综合评价：科技感吧。

推荐指数：★★★★★

三十二、在字母上做细节

http://www.adamhartwig.co.uk/

感官体验：利hoer字母时将字母变换为另一种方式。

综合评价：改变微细节

推荐指数：★★★★★

三十二、偶尔页面中加些有趣的元素

http://fff.cmiscm.com/#!/main

感官体验：根据不同的标签，呈现不同的内容，很好玩，在枯燥的页面中加入一些好玩的元素或许会为页面增添很多色彩呢。

综合评价：在页面的某处加入这些微元素，会显得很有趣呢。

推荐指数：★★★★★

三十二、连贯性的页面引入

http://sidigital.co/

感官体验：随着页面的滚动使液体一直下流，并实现相应的动效。

综合评价：根据自身需求，利用树状形结构以好玩的形式展现出来。

推荐指数：★★★★★

三十三、使用变动的图形，吸引点击

https://trends2015.hautehorlogerie.org/#!/

感官体验：利用一直变动的图形，并加以独特的表现方式增加趣味性，同时吸引注意力。

综合评价：一般动态的人们就喜欢点击，所有为你的页面多添加一些动效吧。

推荐指数：★★★★★

最后总结：

核心思想：

1. 页面请求资源少(图片少),尽量以色块代替图片；

2. 为页面多添加一些互动或者动态小元素，比如：

   1） 尽量多地为按钮添加hover效果，给予反响并将效果做精，hover时的效果,hover失去时的效果，hover转换时的效果等；

   2） 为图片添加相应的效果，hover后显示相应的信息；

   3） 背景添加一些小动效，类似多边形，圆形，三角形，线条等。

3. 滚动加载——>>根据scroll事件，滚到当前位置时，将文字、图片配以动效逐一加载；

4. 首屏高度100%全屏显示，淡淡的背景色+大title描述，是现在较流行的表现方式；

5. 背景色可以使用非规则矩形表示，显得不那么刻板老套；

6. 如想做出超炫酷的小特效：

   1）可以借助CodePen中指定小特效；

   2）SVGDeveloper可以绘制SVG图形，之后将想法表达给前端展示；

7. 如页面请求资源过多，就如图片过多。可以为页面添加与之相关的Loading效果，以loading形式引入正文，分散用户等待的注意力，使其愿花费更长的时间去等待；

8. 导航栏的展现，不一定非得居于顶部、左侧显示，可以变换其它的显示方式，具体的请参考第七条；

9.也可以为页面添加背景音乐、视频等元素，一般首屏加载完毕后自动播放视频，较科技感，但前提是视频占空间较小，或者首屏轮播图，最后一页显示视频；

10. 第十五条、二十七条这种基于Canvas实现的超级酷炫最好少用：

    1）加载时间过长，使用户丧失耐心；

    2）技术上实现比svg难度大，建议多用svg做一些小特效。

11. 目前调研的大多是国外的优秀设计网站，固在技术方面很成熟，动效、交互、颜色搭配、色块与标题间的搭配、页面互动方式等都比国内的要酷些。

据了解现阶段国内网页互动+hover动效+页面动态小元素尚不成熟，用的较少，也不够灵活。

转载原文：https://blog.csdn.net/qq_26445509/article/details/51442793