awesome-lists
Userful Resources for Web Developers
WYSIWYG Editor | 富文本編輯器
基于javascript和css開發(fā)的 Web富文本編輯器, 輕量、簡潔、易用、開源免費
Simditor 是團隊協(xié)作工具 Tower 使用的富文本編輯器。 功能精簡,加載快速。
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 | 圖表
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/
滾動頁面觸發(fā)動畫:
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
數(shù)據(jù)動畫:
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
滾動觸發(fā)函數(shù):
http://imakewebthings.com/waypoints/
自定義頁面滾動路徑:
http://joelb.me/scrollpath/
Components
關(guān)于前端組件化的一些優(yōu)秀實現(xiàn)。
基于 react 的組件框架
AntDesign
基于 vue 的組件框架,推薦使用
Element
可以閱讀其關(guān)于前端組件化的思路
AmazeUI
滴滴出品,是個不錯的公司前端文檔站點案例
魔方組件庫
Hover 效果
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 is an impressive hover effects collection, powered by pure CSS3, no dependency, work well with Bootstrap 3!
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.
An inspirational collection of subtle hover effects