raineverywhere

一个与框架无关的 Vanilla JS 透明下雨效果 npm 包。它可以把雨效果叠加到任意 HTML 元素上，同时保留元素原本的内容和交互。

安装

npm install raineverywhere

JavaScript API

import { attachRain } from 'raineverywhere'

const link = document.querySelector('a')
const rain = attachRain(link)

// 需要时清理效果
rain.destroy()

也可以传 CSS 选择器：

attachRain('.hero-image')

HTML 属性方式

import { autoInit } from 'raineverywhere'

autoInit()

<a data-rain>这个链接原本的内容不会改变</a>
<img data-rain src="./photo.jpg" alt="雨中的图片" />

可用的数据属性：

<div
  data-rain
  data-rain-intensity="1.2"
  data-rain-speed="0.8"
  data-rain-opacity="0.9"
  data-rain-z-index="10"
></div>

参数

attachRain(element, {
  intensity: 1,
  speed: 1,
  opacity: 1,
  zIndex: 1000,
  maxDpr: 1.5,
  longDrops: 500,
  shortDrops: 500,
  longColor: '255,255,255',
  shortColor: '174,194,224',
})

默认情况下，雨滴数量会根据目标元素的面积自动缩放。需要完全固定数量时，可以显式传入 longDrops 和 shortDrops。

设计特点

• 不修改目标元素的 innerHTML
• 不需要包裹目标元素
• 透明 Canvas，不遮挡元素原本内容
• pointer-events: none，不会阻止链接、按钮等交互
• 支持 img 等不能包含子元素的元素
• 自动跟随滚动、窗口变化和元素尺寸变化
• 不依赖 React、Vue 或其他前端框架