granimjs:给网页背景 元素 文字添加交互式的渐变效果

granim.js 是一个开源 JavaScript 库,专门用于创建流畅和交互式的渐变动画。这些动画可以作为网页的背景,也可以给其他元素添加渐变动画,如按钮或滑块的视觉反馈。还可以为文字加上渐变效果,为用户带来视觉上的吸引力。
示例代码
// js var granimInstance = new Granim({ element: '#canvas-basic', direction: 'diagonal', isPausedWhenNotInView: true, states : { "default-state": { gradients: [ ['#ff9966', '#ff5e62'], ['#00F260', '#0575E6'], ['#e1eec3', '#f05053'] ] } }});
复杂渐变动画
// js var granimInstance = new Granim({ element: '#canvas-complex', direction: 'left-right', isPausedWhenNotInView: true, states : { "default-state": { gradients: [ [ { color: '#833ab4', pos: .2 }, { color: '#fd1d1d', pos: .8 }, { color: '#38ef7d', pos: 1 } ], [ { color: '#40e0d0', pos: 0 }, { color: '#ff8c00', pos: .2 }, { color: '#ff0080', pos: .75 } ], ] } } });
带图像和混合模式的渐变动画
// js var granimInstance = new Granim({ element: '#canvas-image-blending', direction: 'top-bottom', isPausedWhenNotInView: true, image : { source: '../assets/img/bg-forest.jpg', blendingMode: 'multiply' }, states : { "default-state": { gradients: [ ['#29323c', '#485563'], ['#FF6B6B', '#556270'], ['#80d3fe', '#7ea0c4'], ['#f0ab51', '#eceba3'] ], transitionSpeed: 7000 } } }
API 介绍:
选项 (Options)
element (必需): 指定用于渐变动画的 canvas 元素的 CSS 选择器或 HTMLCanvasElement。 name: 用于设置深色/浅色主题的类名前缀。 elToSetClassOn: 设置深色/浅色类名的元素。 direction: 渐变的方向,可选项包括 'diagonal'、'left-right'、'top-bottom'、'radial' 或 'custom'。 customDirection: 自定义渐变方向的对象。 isPausedWhenNotInView: 当动画不在视窗内时是否暂停。 scrollDebounceThreshold: 滚动时的防抖阈值。 stateTransitionSpeed: 状态转换的动画时长。 defaultStateName: 默认状态的名称。 states (必需): 包含所有状态的对象。 image: 包含图像选项的对象。
状态 (States)
gradients (必需): 定义渐变颜色和位置的数组。 transitionSpeed: 每个渐变之间的过渡时长。 loop: 动画到达最后一个渐变后是否循环。
图像 (Image)
source (必需): 图像的源地址。 position: 图像在 canvas 中的位置。 stretchMode: 图像是否拉伸以适应大小。 blendingMode: 图像与渐变的混合模式。
回调函数 (Callbacks)
onStart: 动画开始时触发。 onGradientChange: 渐变变化时触发。 onEnd: 动画结束时触发。
事件 (Emitted Events)
监听关键事件,如 'granim:start'、'granim:end'、'granim:loop' 和 'granim:gradientChange'。
方法 (Methods)
play(): 播放动画。 pause(): 暂停动画。 clear(): 停止动画并清除渐变。 changeState(stateName): 更改状态。 changeDirection(directionName): 更改方向。 changeBlendingMode(blendingModeName): 更改混合模式。 destroy(): 销毁实例并移除事件监听器。
[广告]赞助链接:
关注数据与安全,洞悉企业级服务市场:https://www.ijiandao.com/
让资讯触达的更精准有趣:https://www.0xu.cn/

随时掌握互联网精彩
- Apache IoTDB清华大学主导的Apache孵化项目
- m3u8d: 不依赖ffmpeg的跨平台m3u8视频下载与格式转换工具
- NetMount一站式统一管理,轻松挂载云存储
- 下午14:00!跨境支付安全防御直播专场
- 在Z|斗象科技高薪诚招安全攻防架构师、资深售前工程师、大客户销售经理等人才
- CSDN联合腾讯云重磅发布“腾讯云数据库TDSQL工程师路线图”
- 基础软件:IT 产业生态大树下的根
- CSO说安全 | 黄乐:对企业安全运营的思考
- 媲美光纤:5G固定无线接入
- @程序员,CSDN“年度征文”开启,快来年终盘点挣大奖吧~
- 2020年度“博客之星”报名开启!万元大奖等着你
- 白话科普系列——网站靠什么提升加载速度?
赞助链接