V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
jj811208
V2EX  ›  分享创造

watching-you - 让你的 DOM 能够像眼睛一样关注东西的 JS 简易动画库

  •  4
     
  •   jj811208 · 2022-11-21 02:05:34 +08:00 · 1842 次点击
    这是一个创建于 515 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Watching-You

    这是我开发的一个基于 DOM + JS 的简易动画库

    它可以使你的 DOM 像一只眼睛聚焦在任何东西上!

    进而做出一些吸睛的效果~

    Repo URL: https://github.com/jj811208/watching-you

    示例

    登入表单
    login

    John Cena 在看你
    cena

    观看 SVG 元素
    SVG Watcher

    功能介绍

    • 它能够观察鼠标或另一个 DOM ,甚至是输入框里面的值,观察任何你想要的东西!
    • 因为它是基于 DOM ,所以它很容易支持 RWD ,而且上手成本很低
    • 支持多种框架
      • vanilla.js
      • react
      • vue
    • 没有任何依赖套件
    • 使用 TypeScript 编写
    • 如果元素不在屏幕上时,它将自动停止运行,节省资源的浪费

    你可以在 GitHub Repo 里面看到更多内容!

    我自己很喜欢这个效果,而且已经在很多项目中使用它,但这个库仍然是一个非常新的开源项目,所以如果你发现 bug 或有任何建议,可以随时打开一个 issue ,我会很感激你🙏。

    如果你喜欢 watching-you ,希望你能帮这个 Repo 点个星星 🤩

    Repo URL: https://github.com/jj811208/watching-you

    8 条回复    2022-11-23 19:24:01 +08:00
    wsph123
        1
    wsph123  
       2022-11-21 08:53:58 +08:00   ❤️ 1
    妙啊
    add1commit
        2
    add1commit  
       2022-11-21 09:21:13 +08:00   ❤️ 1
    一楼开始 watching you 并准备整个新活
    zephyr1
        3
    zephyr1  
       2022-11-21 10:29:16 +08:00
    登录那个很有意思
    sobev
        4
    sobev  
       2022-11-21 14:37:48 +08:00
    好玩😆
    jj811208
        5
    jj811208  
    OP
       2022-11-22 00:28:38 +08:00
    谢谢喜欢 哈,

    观察了下 NPM 的下载量和 GitHub 星星,两者的比例让我怀疑自己是不是其实是靠示例拿星星的😆
    yunyuyuan
        6
    yunyuyuan  
       2022-11-22 09:27:30 +08:00
    有意思,star 了,有时间我去康康代码
    lizhenda
        7
    lizhenda  
       2022-11-23 19:08:14 +08:00
    有意思哈,好想法
    Envov
        8
    Envov  
       2022-11-23 19:24:01 +08:00
    表单那个鸡蛋人眼神很搞笑
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2866 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 14:26 · PVG 22:26 · LAX 07:26 · JFK 10:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.