百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

17 个实用的图像特效库

liuian 2025-01-11 15:11 30 浏览

1.imagehover

地址:https://github.com/ciar4n/imagehover.css

imagehover.css- 纯CSS3鼠标滑过图片效果动画库,44种鼠标滑过效果


2. ImageTiltEffect

地址:https://github.com/codrops/ImageTiltEffect

TiltEffect是一款让图像跟随鼠标产生微妙立体倾斜效果的插件,使其有层次感和深度感。

3.Magnifier.js

地址:https://github.com/mark-rolich/Magnifier.js

Magnifier 是一款实用纯js制作的图片放大镜插件。它有以下一些特定:

  • 可以使用鼠标滚轮放大缩小图片。
  • 可以通过js或data属性来设置选项。
  • 一次调用可以附加多张图片。
  • 用户可以自定义鼠标进入、离开、移动事件。
  • 加载大图片时可以显现等待文本。

4.gl-react-image-effects

地址:https://github.com/gre/gl-react-image-effects

通用的withReact示例应用程序与 Web。iOS和Android实现一起运行一个代码库( 一些特定的代码被设计成在平台上创建不同的UI )。

5.StickyImageEffect

受ultanoir网站启发的幻灯片显示,具有粘性图像效果。

地址:https://github.com/Anemolo/StickyImageEffect


6.HeatDistortionEffect

WebGL热变形效果全屏背景。

地址:https://github.com/lbebber/HeatDistortionEffect


7.ImageDraggingEffects

使用各种技术为图像设置的一组有趣的拖动效果。

地址:https://github.com/codrops/ImageDraggingEffects

8.jQuery.BgSwitcher

jQuery.BgSwitcher实现背景图像切换效果。

地址:https://github.com/rewish/jquery-bgswitcher

9.FullImageReveal

一个完整的图像显示精美的缩略图滑动效果。

地址:https://github.com/codrops/FullImageReveal

10.diaporama

Diaporama是一种图像/视频/内容幻灯片引擎,提供高质量的动画效果,包括Kenburns效果和GLSL Transitions。

地址:https://github.com/gre/diaporama

11. FollowCursor

图像的旋转跟随光标移动而变化。

地址:https://github.com/bersLucas/FollowCursor

12.react-native-kenburns-view

KenBurns 用于React Native应用程序的图像效果

地址: https://github.com/nHiRanZ/react-native-kenburns-view


13.vintageJS

VINTAGEJS 是一个jQuery插件,它使用HTML5 canvas为你的图像/照片添加惊叹的复古效果。它预置了三种效果,并且可以很容易定制。

地址:https://github.com/lindelof/awesome-web-effect

14.ThumbnailGridExpandingPreview

有关如何使用扩展的图像预览创建缩略图网格的教程,类似于在Google图片上看到的效果。

地址:https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

15.gridder

一个jQuery插件,显示缩略图网格扩展预览,类似于在Google图片上看到的效果。

地址:https://github.com/oriongunning/gridder

16.MotionTransitionEffect

图像幻灯片的快速运动过渡效果。

地址:https://github.com/codrops/MotionTransitionEffect


17.tiltedpage_scroll

tiltedpage_scroll.js是一款支持鼠标滚动、设置图片角度的一款插件。当页面滚动的时候,图片会有倾斜3D的效果,作为产品展示是个不错的选择。

地址:http://peachananr.github.io/tiltedpage_scroll/demo/tiltedpage_scroll_demo.html


相关推荐

vue怎么和后端php配合

Vue和后端PHP可以通过HTTP请求进行配合。首先,前端Vue可以使用axios库或者Vue自带的$http对象来发送HTTP请求到后端PHP接口。通过axios库发送POST、GET、PUT等请求...

Ansible最佳实践之 AWX 使用 Ansible 与 API 通信

#头条创作挑战赛#API简单介绍红帽AWX提供了一个类似Swagger的RESTful风格的Web服务框架,可以和awx直接交互。使管理员和开发人员能够在webUI之外控制其...

PHP8.3 错误处理革命:Exception 与 Error 全面升级

亲爱的小伙伴,好久没有发布信息了,最近学习了一下PHP8.3的升级,都有哪些优化和提升,把学到的分享出来给需要的小伙伴充下电。技术段位:高可用性必修目标收益:精准错误定位+异常链路追踪适配场景...

使用 mix/vega + mix/db 进行现代化的原生 PHP 开发

最近几年在javascript、golang生态中游走,发现很多npm、gomod的优点。最近回过头开发MixPHPV3,发现composer其实一直都是一个非常优秀的工具,但是...

15 个非常好用的 JSON 工具

JSON(JavaScriptObjectNotation)是一种流行的数据交换格式,已经成为许多应用程序中常用的标准。无论您是开发Web应用程序,构建API,还是处理数据,使用JSON工具可以大...

php8环境原生实现rpc

大数据分布式架构盛行时代的程序员面试,常常遇到分布式架构,RPC,本文的主角是RPC,英文名为RemoteProcedureCall,翻译过来为“远程过程调用”。主流的平台中都支持各种远程调用技术...

「PHP编程」如何搭建私有Composer包仓库?

在前一篇文章「PHP编程」如何制作自己的Composer包?中,我们已经介绍了如何制作自己的composer包,以及如何使用composer安装自己制作的composer包。不过,这其中有...

WAF-Bypass之SQL注入绕过思路总结

过WAF(针对云WAF)寻找真实IP(源站)绕过如果流量都没有经过WAF,WAF当然无法拦截攻击请求。当前多数云WAF架构,例如百度云加速、阿里云盾等,通过更改DNS解析,把流量引入WAF集群,流量经...

【推荐】一款 IDEA 必备的 JSON 处理工具插件 — Json Assistant

JsonAssistant是基于IntelliJIDEs的JSON工具插件,让JSON处理变得更轻松!主要功能完全支持JSON5JSON窗口(多选项卡)选项卡更名移动至主编辑器用...

技术分享 | 利用PHAR协议进行PHP反序列化攻击

PHAR(“PhpARchive”)是PHP中的打包文件,相当于Java中的JAR文件,在php5.3或者更高的版本中默认开启。PHAR文件缺省状态是只读的,当我们要创建一个Phar文件需要修改...

php进阶到架构之swoole系列教程(一)windows安装swoole

目录概述安装Cygwin安装swoolephp7进阶到架构师相关阅读概述这是关于php进阶到架构之swoole系列学习课程:第一节:windows安装swoole学习目标:在Windows环境将搭建s...

go 和 php 性能如何进行对比?

PHP性能很差吗?每次讲到PHP和其他语言间的性能对比,似乎都会发现这样一个声音:单纯的性能对比没有意义,主要瓶颈首先是数据库,其次是业务代码等等。好像PHP的性能真的不能单独拿出来讨论似的。但其实一...

Linux(CentOS )手动搭建LNMP(Linux+Nginx+Mysql+PHP)坏境

CentOS搭建LNMP(Linux+Nginx+Mysql+PHP)坏境由于网上各种版本新旧不一,而且Linux版本也不尽相同,所以自己写一遍根据官网的提示自己手动搭建过程。看官方文档很重要,永远...

json和jsonp区别

JSON和JSONP虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种非官方跨域数据交互协议。一个是描述信息的格式,一个是信息传递的约定方法。一、...

web后端正确的返回JSON

在web开发中,前端和后端发生数据交换传输现在最常见的形式就是异步ajax交互,一般返回给js都是json,如何才是正确的返回呢?前端代码想要获取JSON数据代码如下:$.get('/user-inf...