10款纯CSS实现的超炫的图片悬停特效

1.Scroll Depth 衡量页面滚动 Google 分析插件

Scroll Depth 是一个小型的 Google Analytics(谷歌分析)插件,可以让你衡量用户在页面上滚动了多远。它可以监控 25% 0% 5% 100% 四个滚动点,并发送谷歌分析事件
您还可以跟踪页面上的特定元素是否滚动到视图中。例如在博客上,你可以每当用户到达博客底部后发送一个滚动深度的事件。该插件支持 Universal Analytics(通用分析),经典 Google Analytics(谷歌分析)和谷歌标记管理

在线演示

源码下载

2.ScrollMagic 酷毙了!超炫的页面滚动交互效

ScrollMagic 是一 jQuery 插件,它让你可以像使用进度条一样使用滚动条。如果你想在特定的滚动位置开始一个动画,并且让动画同步滚动条的动作,或者把元素粘在一个特定的滚动位置,那么这款插件正是你需要的。使 ScrollMagic,您可以很容易地把视差效果添加到您的网站中。当用户到达某个滚动位置时,你可以调用函数,或以任何其他方式来和当前的滚动位置进行交互

在线演示

源码下载

3.jQuery Pjax 页面无刷新加载,优化用户体验

pjax HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接、标题以及后退按钮都是有效的。jQuery pjax 这款插件可以帮助你把这项技术运用到自己的网站中

在线演示

源码下载

4.Bucky 免费开源的实时用户监控工具

Bucky 是一个开源的实时用户监控工具,用于衡量用户在浏览器中使用 Web 应用程序时的性能。它可以自动测量你的网页需要多长时间来加载,Ajax 请求需要多长时间和各个函数需要实行多久

在线演示

源码下载

5.CSS Shake 摇摆摇摆!动感的 CSS 抖动效果

CSS Shake 是一 CSS3 动画特效,让页面 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮、LOGO 以及图片等元素。所有这些效果都是只需要单一的标签,加上特定 class 即可。因为使用了 CSS3 过渡、转换和动画效果,因此只支持 Chrome、Firefox Safari 等现代浏览器

在线演示

源码下载

6.Remodal 支持 Hash 追踪的响应式模态窗

Remodal 是一个扁平化,响应式,轻量而且容易定制的模态窗口插件,支持使用声明状态和 Hash 跟踪。您可以轻松地定义为模态弹窗定义背景景容器(如模糊效果)。支持所有现代的浏览器

在线演示

源码下载

7.Fixed Responsive Nav 响应式的单页网站导航插件

Fixed Responsive Nav 是一个响应式的,固定的,触摸友好的单页网站导航插件,响应式导航,流畅的动画滚动。该项目采用渐进增强构建,支持工作在 IE6 及以上版本的浏览器 你可以给导航打开的内容添加一个遮罩,自动突出显示当前位置。你可以自由地使用提供的 JavaScript,CSS 和图标字体用于商业或非商业项目

在线演示

源码下载

8.GitBook 使用 GitHub Markdown 制作书籍

GitBook 是一个命令行工具(也 Node.js 库),让你能够使 GitHub/Git Markdown 构建出美丽的编程书籍,可以包含互动的练习。GitBook 支持使用多种语言构建书籍。每种语言都应该是按照正常 GitBook 格式的子目录,另外要在版本库根目录下 LANGS.md 文件

在线演示

源码下载

9.iHover 30+ CSS 实现的超炫的图片悬停特效

iHover 是一个令人印象深刻的图片悬停效果集合,完全基 CSS3 实现,无依赖,能够搭 Bootstrap 3 很好地工作。基 SCSS 技术构建,便于修改变量。有模块化的代码,无需包含整个文件 把饭 30 多个悬停效果,满足各种需要

在线演示

源码下载

10.Permit.js 用于构建多状态原型的 jQuery 插件

Permit.js 是一 jQuery 插件,用于构建交互的,多态的网站原型和应用程序原型。也许你的网站有的功能仅适用于登录的成员,只有管理员才能使用或者你的应用程序会根据线上或离线有不同的功能,这些都是多状态原型的例子。Permit.js 使得模拟这些不同情况变得轻而易举。它设计用于为任何的 HTML & CSS 交互原型工作的人,包括信息架构师和其他用户界面和用户体验的专业人士使用

在线演示

源码下载

未经允许不得转载:爱前端网 » 10款纯CSS实现的超炫的图片悬停特效

赞 (0) 打赏


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏