• 技术文章 >头条

    【推荐】17个提升用户体验图像特效库

    藏色散人藏色散人2020-12-14 17:36:20转载2238

    1.imagehover

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

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

    1.gif

    2. ImageTiltEffect

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

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

    1.gif

    3.Magnifier.js

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

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

    3fe08281baaa777116c95ae83f3315d.png

    4.gl-react-image-effects

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

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

    5bf39a1d7ed48634a8ea92be4bb3b52.png

    157492884d4c15d6b8294b350c76d4d.png

    5.StickyImageEffect

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

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

    f8a4c4988904b52979c0697341a959f.png

    6.HeatDistortionEffect

    WebGL热变形效果全屏背景。

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

    ffd56e6448577507ee6f741272e0b54.png

    7.ImageDraggingEffects

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

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

    1.gif

    8.jQuery.BgSwitcher

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

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

    eafd72b1fe4534e002af212bb4e833b.png

    9.FullImageReveal

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

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

    c4b0ccf6deafb533e40797bc1824a6d.png

    10.diaporama

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

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

    1c630f87c10edf0ed0a574a0c9a68b0.png

    11. FollowCursor

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

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

    e1163242e690b6511844c40c51b5797.png

    12.react-native-kenburns-view

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

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

    0513c1a38ac9880871889c48559af96.png

    13.vintageJS

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

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

    1cecf0a2cdb57ba0bd0290cfdd099e7.png

    14.ThumbnailGridExpandingPreview

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

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

    bbc3ca7bfabf13ed61e403483518f63.png

    15.gridder

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

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

    e6d855fab08488299f28ccf67798192.png

    16.MotionTransitionEffect

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

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

    1.gif

    17.tiltedpage_scroll

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

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

    9a2f62a422859f37bdfbc62aedc63b7.png

    代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug(地址:https://www.fundebug.com/?utm_source=xiaozhi)。

    原文:https://github.com/lindelof/awesome-web-effect

    声明:本文转载于:segmentfault,如有侵犯,请联系admin@php.cn删除
    专题推荐:图像特效库
    上一篇:各种知名网站的404页面,看看谁更有创意? 下一篇:值得研究的20个Vue开源项目
    线上培训班

    相关文章推荐

    • 14个VSCode高频插件(推荐)• 5个好用的Vue.js库推荐• 2021年值得收藏的10 个 VSCode 插件(推荐)• 推荐10款GitHub中高价值的PHP项目(值得收藏)• 23个需要了解的十分有用的nodejs库(推荐)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网