html闪星星特效,jquery和canvas炫酷星星闪烁特效插件
jQuery-canvas-sparkles是一款jquery和canvas炫酷星星闪烁特效插件。该插件可以在DOM元素上制作出漂亮的星星闪烁效果。你可以指定星星的数量、颜色、尺寸和运动方向等。
使用方法
在页面中引入jquery和jquery-canvas-sparkles.js文件。
HTML结构
例如你需要为一张图片制作星星闪耀效果,它的HTML结构如下:
初始化插件
在页面DOM元素加载完毕之后,通过sparkle()方法来初始化该jquery星星闪耀插件。
$(".element").sparkle();
配置参数
该jquery和canvas炫酷星星闪烁特效插件的可用配置参数有:
$(document).ready(function() {
$("img").sparkle({
//颜色:接收HEX字符串,或者“rainbow”关键字,或一组HEX字符串
color: ["#2eafea","#e56604"],
//一次显示星星的数量
count: 30,
// 距离canvas边部多少将会重叠
overlap: 0,
// 设置速度
speed: 1,
// 最小尺寸
minSize: 4,
// 最大尺寸
maxSize: 7,
//星星运动的方向,可以是"up", "down" 或 "both"
direction: "both"
});
});
事件
可以通过下面的事件来触发星星的开始、接收和改变尺寸。
start.sparkle:触发星星开始闪烁。
stop.sparkle:结束星星闪烁。
resize.sparkle:动态修改canvas的尺寸,并改变星星的位置。
例如:
// first we need an element with sparkles
$("header").sparkle();
// here we can remove the default mouse/keyboard triggers for sparkles,
// perhaps we don't want them to trigger on interaction
$("header")
.off("mouseover.sparkle")
.off("mouseout.sparkle")
.off("focus.sparkle")
.off("blur.sparkle")
// we can also trigger the start/stop events on the element
// which has the sparkles bound to it!
$("header")
.trigger("start.sparkle")
.on("click", function() {
$(this).trigger("stop.sparkle");
});
// it's also possible to resize teh canvas and reposition
// the sparkles whenever the browser is resized...
var timer;
$(window).on("resize", function(){
clearTimeout(timer);
timer = setTimeout(function(){
$("header").trigger("resize.sparkle");
},200);
});
html闪星星特效,jquery和canvas炫酷星星闪烁特效插件相关推荐
- html5星空效果图,HTML5 canvas炫酷星空背景特效
jquery-warpdrive-plugin是一款可以制作基于HTML5 canvas的炫酷星空背景特效的jquery插件.这个星空背景特效可通过配置参数进行灵活的配置,可用鼠标进行互动. 使用方法 ...
- html图片幕墙特效,jQuery和CSS3炫酷可交互的图片墙特效
Polaroid_Gallery是一款效果非常酷的可交互的jQuery和CSS3图片墙特效插件.该照片墙插件可以使用圆点导航按钮将相应的图片旋转居中显示,当点击居中的图片时,图片会翻转到反面,显示图片 ...
- jQuery和CSS3炫酷滚动页面内容元素动画特效
jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩 ...
- html 星空效果,html5 canvas炫酷旋转银河系星空背景特效
这是一款html5 canvas炫酷旋转银河系星空背景特效.该特效通过canvas来绘制银河系星盘,并制作星系旋转的效果,非常炫酷. 使用方法 HTML结构 该旋转银河系星空背景特效的HTML结果只需 ...
- H5炫酷特效系列4——炫酷粒子变化特效
这个示例虽然没有相对比较实用的特性,但是表现出来的效果确实非常震撼眼球.先上效果图,让各位同胞感受一下: 特效的表现感很强,有兴趣的读者可以仔细学习一下下面的代码,尝试着理解其中的逻辑. <!D ...
- 【网页特效】12 个炫酷背景特效库
1.particles-bg 地址:https://github.com/lindelof/particles-bg 效果: 2.particles-bg-vue 地址:https://github. ...
- Canvas炫酷3D线条动画背景
下载地址 Canvas炫酷3D线条动画背景,可以变色的颜色渐变网页动态背景特效. dd:
- 给页面写一个炫酷的时钟特效【web前端】
文章目录 一.前言 二.想法设计/实现过程 三.基本样式 四.时间函数控制器 五,时,分,秒占位 六.时间动态填充 一.前言 今天看到某网站的时间特别的丑陋,所以就诞生了写一个看时间的炫酷的时钟前端页 ...
- jquery 实现智能炫酷的翻页相册效果
jquery 实现智能炫酷的翻页相册效果 巧妙的运用 Html 的文档属性,大大减少jquery 的代码量,实现了智能炫酷的翻页相册.兼容性很好,实现了代码与标签的完全分离 1. [代码]jquer ...
- 炫酷的动画特效—css3旋转立方球体
炫酷的动画特效-css3旋转立方球体 想要实现旋转立方球体特效,以下的内容你不容错过. 要理解的知识点 形成一个3D空间: transform-style:preserve-3d (让父元素形成3D, ...
最新文章
- 重庆理工大学c语言程序实验报告,重庆理工大学-C语言程序实验报告.doc
- python程序员需要掌握哪些技术-高级的python 后端程序员, 应该掌握哪些技能点 ?...
- 在word中的公式以代码形式体现在web上的方法
- 服务器控件 原生html,应用样式到HTML服务器控件
- 计算机网络:子网划分、子网掩码、CIDR 、路由聚合相关计算详解
- potplayer 多个进程_操作系统 | 进程同步与进程互斥
- 互联网公司“黑话”大全,各个岗位都躺枪了!
- 中gcd函数_函数和模块的使用
- java----监听器的作用_一、理解监听器的作用
- 视频编解码(七):profilelevel简介、ffmpeg如何控制profilelevel、编码效率
- 2021租房合同样板
- 统计量 估计量 概念
- vue基础-过滤器(Filters)
- 用PS为背景图片添加文字抠图
- 腾讯金融云mysql,腾讯云金融级云数据库优势与功能介绍
- Echarts - legend、tooltip、xAxis属性设置
- 化工厂人员定位详细解决方案
- 服务器使用显示器的大小,别纠结了!看完这篇你就知道显示器买多大尺寸
- delphi 企业微信消息机器人_企业微信群消息机器人发送开源项目
- python离线安装第三方库whl_详细说明如何在pycharm不联网的情况下,离线安装第三方库及依赖包(如sklearn)...
热门文章
- 《黑客秘笈——渗透测试实用指南(第2版)》—第1章1.5节构建渗透测试环境...
- zabbix报警 High swap space usage ( less than 50% free) 解决方案
- 小程序心知天气API获取数据
- Django | ORM choices参数详解
- App启动页倒计时圆形并且跳过功能实现
- 谷歌命名工具_Google地图正在重命名整个社区
- 2018年已经过了一半,你还记得年初时候定的小目标么——致已经逝去的2018上半年
- c++中调用c编写的动态链接库出现undefined reference to `xxx‘的解决方法
- HDU5960 可持久化左偏树 k短路问题
- CentOS7 使用光盘镜像作为yum源