认识达内从这里开始

认真做教育专心促就业

web开发都用哪些工具？库？资源点？

发布：青岛IT培训
来源：青岛IT培训
时间：2019-04-15 16:14

青岛IT培训的小编总结，Javascript 库
Particles.js?-?一个用来在 web 中创建炫酷的浮动粒子的库
Three.js?-?一个用来在 web 中创建 3d 物体和 3d 空间的库
Fullpage.js-?快速实现全屏滚动特性
Typed.js?-?打字机效果
Waypoints.js?-?滚动到某个元素位置时触发一个功能
Highlight.js?-?web 语法高亮
Chart.js?-?使用 JavaScript 创建漂亮的图表
Instantclick?-?能够明显加速网站加载时间，鼠标 hover 时预加载资源
Chartist?-?另一个图表库
Motio?-?一个基于动画和平移的雪碧图库
Animstion?-?CSS 实现动画过渡的 jQuery 插件
Barba.js?-?流式页面过渡
TwentyTwenty?-?一个对比图片的可视化 diff 工具
Vivus.js?-?在 SVG 上绘制动画
Wow.js?-?滚动时展现动画
Scrolline.js?-?页面滚动时显示滚动进度
Velocity.js?-?快速流畅的 JavaScript 动画
Animate on scroll?-?漂亮的页面滚动元素动画
Handlebars.js?-?Javascript 模板
jInvertScroll?-?视差滚动
One page scroll?-?又一个页面滚动库
Parallax.js?-?对智能设备方向变化做出响应的视差引擎
Typeahead.js?-?搜索补全
Dragdealer.js?-?炫酷拖拽
Bounce.js?-?创建炫酷的 CSS3 动画
Pagepiling.js?-?全屏滚动
Multiscroll.js?-?两列垂直反向滚动
Favico.js?-?动态 favicon
Midnight.js?-?固定头部切换效果
Anime.js?-?动画库
Keycode?-?获取键盘按键的 JavaScript keycode
Sortable?-?拖拽插件
Flexdatalist?-?自动补全
Slideout.js?-?移动应用侧滑导航
Jquerymy?-?使用 jQuery 实现双向数据绑定
Cleave.js?-?实时格式化输入内容
Page?-?客户端单页应用路由
Selectize.js?-?用来添加 tag 的 Hybrid 选择框
Nice select?-?创建漂亮的选择框的 jQuery 库
Tether?-?使用固定定位来创建相关元素
Shepherd.js?-?为应用创建新手引导
Tooltip?-?tooltip 提示框
Select2?-?Jquery 选择框插件
IziToast?-?通知弹窗实现
IziModal?-?模态框实现
CSS 库 / 设计相关
Animate.css?-?动画库
Flat UI Colors?-?扁平化设计配色
Material design lite-?基于 Google material design 的框架
Colorrrs?-?随机颜色生成器
Section separators?-?CSS 实现区域分割
Topcoat?-?框架
Create ken burns effect?-?使用 CSS3 动画实现 Ken burns 特效
DynCSS?-?给 CSS 添加 function,动态化 CSS
Magic animations?-?CSS3 实现动画特效
CSSpin?-?css spinners 合集
Feather icons?-?Icon 集合
Ion icons?-?Icon 集合
Font awesome?-?Icon 集合
Font generator?-?组合多个字体创建混合字体
On/Off switch?-?使用 CSS 创建 on/off 开关、radio 按钮
UI Kit?-?框架
Bootstrap?-?框架
Foundation?-?框架
有用的产品/链接
<head>cheatsheet?-?可以写在<head>中的所有标签
Ghost?-?基于 Node.js 的博客平台
What runs?-?一个用于网站技术分析的 Chrome 插件

Learn anything?-?一个强大的用于分析某个主题的思维导图

青岛IT培训

这些库的链接
<h3>Javascript 库</h3>
<a href=“#/particles.js/”>Particles.js?</a>-?一个用来在 web 中创建炫酷的浮动粒子的库
<a href=“#/”>Three.js</a>?-?一个用来在 web 中创建 3d 物体和 3d 空间的库
<a href=“#/fullPage/#firstPage”>Fullpage.js</a>-?快速实现全屏滚动特性
<a href=“#/demos/typed-js/”>Typed.js</a>?-?打字机效果
<a href=“#/waypoints/”>Waypoints.js?</a>-?滚动到某个元素位置时触发一个功能
<a href=“#/”>Highlight.js?</a>-?web 语法高亮
<a href=“#/”>Chart.js</a>?-?使用 JavaScript 创建漂亮的图表
<a href=“#/”>Instantclick</a>?-?能够明显加速网站加载时间，鼠标 hover 时预加载资源
<a href=“#/chartist-js/index.html”>Chartist</a>?-?另一个图表库
<a href=“#/motio/#!introduction”>Motio?</a>-?一个基于动画和平移的雪碧图库
<a href=“#/animsition/”>Animstion</a>?-?CSS 实现动画过渡的 jQuery 插件
<a href=“https://github.com/luruke/barba.js”>Barba.js</a>?-?流式页面过渡
<a href=“#/playground/twentytwenty”>TwentyTwenty?</a>-?一个对比图片的可视化 diff 工具
<a href=“https://github.com/maxwellito/vivus#vivusjs”>Vivus.js</a>?-?在 SVG 上绘制动画
<a href=“#/WOW/”>Wow.js?</a>-?滚动时展现动画
<a href=“https://github.com/anthonyly/Scrolline.js”>Scrolline.js</a>?-?页面滚动时显示滚动进度
<a href=“#/”>Velocity.js</a>?-?快速流畅的 JavaScript 动画
<a href=“#/aos/”>Animate on scroll</a>?-?漂亮的页面滚动元素动画
<a href=“#/”>Handlebars.js</a>?-?Javascript 模板
<a href=“#/jInvertScroll/”>jInvertScroll</a>?-?视差滚动
<a href=“https://github.com/peachananr/onepage-scroll”>One page scroll</a>?-?又一个页面滚动库
<a href=“https://github.com/wagerfield/parallax”>Parallax.js</a>?-?对智能设备方向变化做出响应的视差引擎
<a href=“#/typeahead.js/”>Typeahead.js?</a>-?搜索补全
<a href=“#/dragdealer/”>Dragdealer.js</a>?-?炫酷拖拽
<a href=“#/”>Bounce.js?</a>-?创建炫酷的 CSS3 动画
<a href=“https://github.com/alvarotrigo/pagePiling.js”>Pagepiling.js</a>?-?全屏滚动
<a href=“https://github.com/alvarotrigo/multiscroll.js”>Multiscroll.js?</a>-?两列垂直反向滚动
<a href=“#/favico.js/”>Favico.js</a>?-?动态 favicon
<a href=“#/midnight.js/”>Midnight.js?</a>-?固定头部切换效果
<a href=“#/”>Anime.js?</a>-?动画库
<a href=“#/”>Keycode</a>?-?获取键盘按键的 JavaScript keycode
<a href=“#/Sortable/”>Sortable</a>?-?拖拽插件
<a href=“#/flexdatalist/”>Flexdatalist?</a>-?自动补全
<a href=“#/”>Slideout.js?</a>-?移动应用侧滑导航
<a href=“#/#/”>Jquerymy</a>?-?使用 jQuery 实现双向数据绑定
<a href=“#/cleave.js/”>Cleave.js?</a>-?实时格式化输入内容
<a href=“#/client-side-routing/page/”>Page</a>?-?客户端单页应用路由
<a href=“#/selectize.js/”>Selectize.js</a>?-?用来添加 tag 的 Hybrid 选择框
<a href=“#/jquery-nice-select/”>Nice select?</a>-?创建漂亮的选择框的 jQuery 库
<a href=“#/”>Tether</a>?-?使用固定定位来创建相关元素
<a href=“https://github.com/HubSpot/shepherd”>Shepherd.js?</a>-?为应用创建新手引导
<a href=“https://github.com/HubSpot/tooltip”>Tooltip</a>?-?tooltip 提示框
<a href=“#/”>Select2</a>?-?Jquery 选择框插件
<a href=“#/”>IziToast</a>?-?通知弹窗实现
<a href=“#/”>IziModal?</a>-?模态框实现
<h3>CSS 库 / 设计相关</h3>
<a href=“#/animate.css/”>Animate.css</a>?-?动画库
<a href=“#/”>Flat UI Colors?</a>-?扁平化设计配色
<a href=“#/index.html”>Material design lite</a>-?基于 Google material design 的框架
<a href=“#/web-design/random-color-picker/”>Colorrrs?</a>-?随机颜色生成器
<a href=“#/Development/SectionSeparators/”>Section separators</a>?-?CSS 实现区域分割
<a href=“#/”>Topcoat</a>?-?框架
<a href=“#/html5/ken_burns_effect_css.htm”>Create ken burns effect?</a>-?使用 CSS3 动画实现 Ken burns 特效
<a href=“#/dyn-css/”>DynCSS</a>?-?给 CSS 添加 function,动态化 CSS
<a href=“#/example/magic_animations/”>Magic animations</a>?-?CSS3 实现动画特效
<a href=“#/csspin/”>CSSpin</a>?-?css spinners 合集
<a href=“#/”>Feather icons</a>?-?Icon 集合
<a href=“#/”>Ion icons</a>?-?Icon 集合
<a href=“#/”>Font awesome</a>?-?Icon 集合
<a href=“#/font-generator/”>Font generator</a>?-?组合多个字体创建混合字体
<a href=“#/freebies/onoff/”>On/Off switch</a>?-?使用 CSS 创建 on/off 开关、radio 按钮
<a href=“#/”>UI Kit</a>?-?框架
<a href=“#/”>Bootstrap</a>?-?框架
<a href=“#/”>Foundation?</a>-?框架
<h3>有用的产品/链接</h3>
<a href=“https://github.com/joshbuchea/HEAD”> <head>cheatsheet</a>?-?可以写在<head>中的所有标签
<a href=“#/”>Ghost?</a>-?基于 Node.js 的博客平台
<a href=“#/”>What runs</a>?-?一个用于网站技术分析的 Chrome 插件
<a href=“#/learn-anything”>Learn anything?</a>-?一个强大的用于分析某个主题的思维导图
以上就是青岛IT培训给大家做的内容详解，更多关于UI的学习，请继续关注青岛IT培训

< 上一篇：常见的web前端面试问题，有哪些呢？？

下一篇：Vue2.0插件集合，UI组件，库，框架，实例 >