Github 传送门

awesome-lists

Userful Resources for Web Developers

WYSIWYG Editor | 富文本编辑器

---

• wangEditor

基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费

• simditor

Simditor 是团队协作工具 Tower 使用的富文本编辑器。 功能精简，加载快速。

• Quill

An API Driven Rich Text Editor. Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.

Charts | 图表

---

• echarts
• Highcharts

Loading Effects

---

• ★12,262 tobiasahlin/SpinKit A collection of loading indicators animated with CSS http://tobiasahlin.com/spinkit/
• ★6,927 ConnorAtherton/loaders.css Delightful, performance-focused pure css loading animations. https://connoratherton.com/loaders
• ★4,461 lukehaas/css-loaders A collection of loading spinners animated with CSS http://projects.lukehaas.me/css-loaders
• ★2,988 jxnblk/loading This could take a while http://jxnblk.com/loading
• ★2,708 SamHerbert/SVG-Loaders Loading icons and small animations built with SVG and CSS. http://samherbert.net/svg-loaders
• ★2,422 tawian/text-spinners Pure text, CSS only, font independent, inline loading indicators http://tawian.io/text-spinners

Animation

---

CSS动画：
https://daneden.github.io/animate.css/

交互动画：
http://anijs.github.io/

滚动页面触发动画：
http://www.vittoriozaccaria.net/dyn-css/

全屏切换：
http://alvarotrigo.com/fullPage/
http://www.thepetedesign.com/demos/onepage_scroll_demo.html
http://alvarotrigo.com/pagePiling/examples/horizontalScroll.html

数据动画：
http://www.chartjs.org/
http://gionkunz.github.io/chartist-js/

功能强大的Swiper
http://2.swiper.com.cn/

Scroll 动画

滚动显示：
https://scrollrevealjs.org/

滚动动画：
http://prinzhorn.github.io/skrollr/
http://mynameismatthieu.com/WOW/

多功能滚动动画：
http://scrollmagic.io/examples/advanced/section_slides_manual.html

滚动触发函数：
http://imakewebthings.com/waypoints/

自定义页面滚动路径：
http://joelb.me/scrollpath/

Components

---

关于前端组件化的一些优秀实现。

基于 react 的组件框架
AntDesign

基于 vue 的组件框架，推荐使用
Element

可以阅读其关于前端组件化的思路
AmazeUI

滴滴出品，是个不错的公司前端文档站点案例
魔方组件库

Hover 效果

---

• Hover.css

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

效果案例：Border Transitions - Reveal

• iHover

iHover is an impressive hover effects collection, powered by pure CSS3, no dependency, work well with Bootstrap 3!

• imagehover.css

Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable image hover effects. Choose from over 40 hover effect classes from a CSS library weighing in at a minified size of only 19KB.

• Hover Effect Ideas

An inspirational collection of subtle hover effects

• Caption Hover Effects

• Shape Hover Effect with SVG