2016年5月15个有趣的CSS和JavaScript库

泡在网上的日子 / 文 发表于2016-06-08 14:33 次阅读

Tutorialzine的宗旨就是帮助你跟上web开发的最新进展和步伐。这就是为什么我们每个月都会发布一套我们认为值得你关注的最佳资源的集合。

原文出处:15 Interesting JavaScript and CSS Libraries for May 2016 

Hint.css

为HTML元素添加提示的纯CSS库。虽然Hint体积非常小,但是我们仍然做到了可自定义,比如大小,颜色和动画。它不需要一行代码,提示是通过添加data属性创建的。


Turntable.js

Turntable.js可以让你轻易实现图像的3D旋转,它通过把一组图片放在on-hover slider中来实现。让用户可以快速查看整套图片,全方位的展现一个产品。


Magic

Magic是一个纯CSS的动画库。这使得它非常小且易于使用的同时也非常顺滑。所有的动画都是通过添加和移除class来触发的,可以通过重写默认的CSS规则来实现自定义。


Sausage

Sausage是一个跟踪滚动条并记录当前阅读所处节点的jQuery工具。这个插件对于超大文档或者无限滚动加载的页面非常有用,因为一个垂直的页面导航可以让内容更有组织。


Odometer

odometer是今天我发现的一个新大陆。这个JavaScript库可以用于数字之间的垂直切换。轻量,易实现,支持多种主题,如老虎机与火车站主体。


FullPage.js

现在我们可以看到越来越多的网站使用全屏滚动效果,一次滚动切换一个页面。除非你是一个DIY狂人,否则这个库是实现此功能的绝佳工具-易使用,文档详细,对浏览器的支持良好。


Chart.js

Awesome library for creating eye-catching animated charts. For better performance, Chart.js relies on canvas elements to draw all the graphs, but doesn’t require of you to know anything about canvas to work with it. All the customization options (and there are a ton of them) are controlled through a simple JavaScript API.

一个棒极了的图表库,可以创建吸引人的图表动画。为了得到更好的性能 ,Chart.js依赖canvas元素绘制所有的图表,但是并不需要你了解任何canvas的知识。所有的自定义选项(而且有很多)都是通过一个简单的JavaScript API定义。


Bricklayer

一个建立类似Pinterest网格的JavaScript。Bricklayer很简单,瞬间就能建立一个健壮的、响应式的布局。它不依赖于任何第三方库,因此很容易与Angular, React,或者任何的大框架集成。


Flatmarket

Flatmarket是一个以最简单与便宜的方式创建电子商务平台的开源项目。它包含了一个静态的网站和一个处理付款的 Node.js 服务端。可以使用一个命令行工具从零开始制作一个商店。


Modaal

Modaal是一个创建弹出窗口的jQuery插件。提供丰富的功能。


Web Starter Kit

Web Starter Kit 是一个帮助开发者快速设置项目的工具集。由谷歌设计提供了能在不同设备和浏览器上运行良好的样板。其中包括MDLSassBabel, 和 gulp 。


Flipside

这是一个能过渡到对话框的按钮。它最酷的地方在于过渡动画,点击按钮的不同部分,动画效果是不一样的。Flipside并不是一个正式的库,但是我们喜欢这种效果所以还是分享了出来。如果你想使用,GitHub上有源码。


Responsify.js

Responsify 是一个 jQuery 插件可以让图像完全响应式而不会牺牲图像的主要部分。


Select2

选择控件的样式在不同的浏览器之间仍然是一个烦人的问题。不过幸好有Select2这样的插件处理这样的问题。这个库还有一些额外的功能,比如搜索,无限滚动以及对IE8的支持。


Vex

一个很小的jQuery 插件,可以实现3D动效的弹出对话框堆叠效果。压缩后只有2kb,所以不会给项目造成任何负担。有多个主题,你也可以自己添加自定义效果。

收藏 赞 (14) 踩 (1)
上一篇:关于z-index 那些你不知道的事
原文出处: tutsplus 。 CSS当中的 z-index 属性看起来足够简单,但是如果你真的想了解它是如何工作的话,在这简单的表面之下,又有许多值得探究的内容。 在这篇教程中,通过探究 层叠上下文 和一系列实际的例子,我们将会阐明z-index的内在机理。 CSS为盒模
下一篇:101种让你的网站更棒的方法
# 101种让你的网站更棒的方法> 本文转载自:[众成翻译](http://www.zcfy.cc)> 译者:[QAQMiao](http://www.zcfy.cc/@QAQMiao)> 链接:[http://www.zcfy.cc/article/766](http://www.zcfy.cc/article/766)> 原文:[https://medium.freecodecamp.com/101-ways