DHappy 上岸没有尽头 你接受了那就是岸

Demos

Slide: Animations in React Native

Main tech：Slide

A presentation about animations in React Native.

Three.js render 3D Rose

Main tech：Three.js WebGL

On the 5th anniversary, I use Three.js to render a rose for my wife. Source code

Ferris Wheel

Main tech：anime.js

A Ferris Wheel animation with anime.js. You can change the speed and direction. See blog here. Source code

Lottie Demo

Main tech：lottie animation

Lottie Demo and animation controller Source code

Life Progress Calculator

Main tech：weex

Early attempts on weex

Fisher-Yates 洗牌算法动画

Main tech：JavaScript

Fisher-Yates 洗牌算法动画。算法详情见 这里。 Source code

Header Transition 渐变动画

Main tech：jQuery BootStrap CSS3

花费不到半小时帮师兄做了一个简单的 CSS3 动画效果，当页面滚动到指定距离时，header 区的背景色由透明变为蓝色。仿照了网站 https://quorrajs.org/ 的 Header 区动画效果。 Source code

遮罩层按指定路径缩小消失

Main tech：jQuery CSS

使用 animate 方法，做到兼容 IE8。曾在联想服务官网上线3个月。 Source code

百度前端学院 task0004 ToDo 应用(移动端)

Main tech：JavaScript LocalStorage requireJS Sass Gulp XSS

在任务三中，做了一个 PC 端的 ToDo 应用。任务四是将它优化，以适应移动端设备。 Source code

百度前端学院 task0003 ToDo 应用

Main tech：JavaScript LocalStorage

任务三，ToDo 单页应用，主要使用了 LocalStorage 存储数据，使用 JSON 模拟了 3 张数据表。 Source code

拖拽交互

Main tech：JavaScript

对鼠标事件应用，以及判断定位的方法等。 Source code

输入框即时提示

Main tech：JavaScript

对input监听，使用正在表达式高亮匹配，实现输入联想效果。 Source code

轮播图

Main tech：JavaScript

变速运动，运动终止条件的应用。 Source code

倒计时

Main tech：JavaScript

setInterval()，Date 对象的学习和使用。 Source code

处理兴趣爱好列表

Main tech：JavaScript

对JavaScript正则表达式和字符串的练习。 Source code

百度前端学院 task0002 展示主页

Main tech：HTML CSS

任务二的展示主页，里面包含五个小 demo。还有一篇相关的日志。 Source code

百度前端学院 task0001 个人博客

Main tech：HTML CSS

完成百度前端学院的任务。深刻的理解了BFC、浮动、inline-block间距，多列布局等技术。还有一篇相关的日志。 Source code

Ghost Button 幽灵按钮

Main tech：CSS3

使用 CSS3 中的旋转、缩放、过渡、动画等效果，制作出很酷的按钮效果。 Source code

CSS3 阴影特效

Main tech：CSS3

CSS3 中的阴影、旋转等效果，制作出曲边阴影和翘边阴影。 Source code

AngularJS 结合动画效果

Main tech：AngularJS CSS3

使用 AngularJS 中的 ngAnimate 加 CSS3里面的一些旋转效果，做出页面切换的效果。 Source code

AngularJS UI-router 练习

Main tech：AngularJS UI-router

UI-router 作为 AngularJS 中路由的扩充，实现了多级路由的效果。使得前端界面跳转更加方便。 Source code

仿知乎页面

Main tech：HTML BootStrap

使用BootStrap仿照知乎做了一个静态页面。 Source code