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/

随时掌握互联网精彩
- Adobe Photoshop for iOS现已发布 免费版可以使用基础功能 付费版7.99美元/月
- Maltrail 恶意流量检测平台
- 用 20+ 行 JavaScript 代码,短暂“变身” iOS 程序员!
- CVE-2018-18708 TENDA缓冲区溢出漏洞
- 在看 | “国防七校”西北工业大学遭受境外网络攻击
- 历史上的今天:PHP公开发布;iPhone 4 问世;万维网之父诞生
- 马化腾:腾讯只是一家普通公司,随时都可以被替换;22岁编程世界冠军加入华为;iPhone14或采用药丸形打孔屏|极客头条
- 知道创宇发布网空测绘知识图谱
- 深圳光明区政府、深圳湾实验室与华为签署两项战略协议
- 【看雪】亮相新耀东方——2021上海网络安全博览会
- 软件工程师安德烈·梅萨加冕 2021 世界小姐冠军
- 挑战安卓会死?华为鸿蒙正为国产操作系统杀出一条路 | 涛滔不绝
赞助链接