这里收集一些我觉得非常牛逼的前端案例。
网站
| 名称 | 描述 | 教程 |
|---|---|---|
| letters-inc | 网站很酷炫，滚动的时候设计的很精妙 | 无 |
| ro.me | 这是真的牛逼！！！ | 官方有相关教程页面 |
| macOS Big Sur | 通过鼠标轮滑控制 | 无 |
| pieces | 酷到没朋友 | 有 |
酷炫动效
html
图片 & 展示
| 名称 | 描述 | 教程 |
|---|---|---|
| 移动应用3D幻灯动效 | 好 | 无 |
| 笔记本翻转入场 | 真 360 度展示 | 无 |
| WebGL失真滑块 | 轮转，是他妈的真酷 | 有 |
| 流动轮转 | 效果和上面差不多 | 无 |
| 粒子组装成文字 | 这个网站可以用 | 无 |
| 响应式全屏竖向轮播 | 一个比较新颖的交互方式 | 无 |
| 滑板商品3D展示 | 用 css 写的 3D 商品展示 | 无 |
| 土豆卡通肖像制做 | 这个交互方式可以学习 | 无 |
| 旋转的药品包装盒 | 360 度产品展示 | 无 |
| 3D头盔粉末化 | 太他妈酷了，这个交互简直无敌 | 无 |
滚动
| 名称 | 描述 | 教程 |
|---|---|---|
| SVG 滚动绘画 | 通过滚动绘制图形 | 无 |
| HTML5带滚动淡入动效 | 滚动页面淡入淡出 | 无 |
| SVG+JS 滚动页面时实现变脸 | 效果很好 | 无 |
| 页面滚动时背景图片渐进模糊 | 效果不错 | 无 |
| jQuery 页面向下滚动内容渐入 | 值得一学 | 无 |
| HTML5 SVG页面滚动时雾凇样式的背景图片揭露特效 | 可塑性很高 | 无 |
| CSS3 页面滚动时字母重新排列动效 | 很有意思 | 无 |
svg 系列
图片 & 展示
| 名称 | 描述 | 教程 |
|---|---|---|
| 图片的百叶窗 | 一个华丽的图片展示 | 无 |
| U盘演示动画 | css 控制 svg | 无 |
| 自动写字动画 | 这个网站可以用 | 无 |
| 交互式svg | 这个也可以作为页面展示 | 无 |
| 花朵矢量图 | 效果非常惊艳，但是原理很简单 | 有 |
| 低多边形狼狗组装动画 | 这他妈实在是太酷了 | 有 |
| 手机壳换色 | 说真的，这么酷的交互太厉害了 | 有 |
| HTML5 SVG可在线定制面部表情 | 可塑性很高 | 无 |
| 随机生成SVG面孔 | 可塑性很高 | 无 |
| 很棒的响应式全屏竖向轮播滚动商品展览 | 使用场景很多 | 无 |
教程
综合
| 名称 | 描述 |
|---|---|
| 踏得网 | 各种酷炫 demo 和教程 |
| jq22 | jquery 插件库，好的，我读付费了 |
| lulux的博客 | 教授了很多前端知识，包括svg |
| zhangxinxu | 真正的前端大佬 |
three.js
| 名称 | 描述 |
|---|---|
| 暮志未晚 | 非常好的 three.js 教程网站 |
| stemkoski | 都是 demo 并且附上了 github 例子，里面有一个控制模型走路的 |
