html全屏飘雪花特效,html5 飘雪花动画(增加背景音乐)
冬天到了,少不了这样的动画效果(领导让加圣诞背景音乐)
效果查看地址:
1、PC端:https://www.huijindaicn.com/i...
{$title}
body {
/*background:url(images/bg.jpg) center no-repeat;*/
margin:0px;
}*
image{ width:100%; }
canvas{ position: fixed; top:0; }
/* 背景音乐开关按钮 */
.music{
width:50px;height:50px;
background:url(/cghd/201612/images/close.png) no-repeat;
background-color: #b91b10;
position: fixed;
top:30%;
right:10px;
cursor: pointer;
border-radius: 25px;
z-index: 9999;
}
.music:hover{
background-color: #b91b10;
}
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container;
var particle;
var camera;
var scene;
var renderer;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = SCREEN_WIDTH / 2;
var windowHalfY = SCREEN_HEIGHT / 2;
var particles = [];
var particleImage = new Image();//THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );
particleImage.src = '/cghd/201612/images/ParticleSmoke.png';
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.z = 1000;
scene = new THREE.Scene();
scene.add(camera);
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );
for (var i = 0; i < 500; i++) {
particle = new Particle3D( material);
particle.position.x = Math.random() * 2000 - 1000;
particle.position.y = Math.random() * 2000 - 1000;
particle.position.z = Math.random() * 2000 - 1000;
particle.scale.x = particle.scale.y = 1;
scene.add( particle );
particles.push(particle);
}
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
setInterval( loop, 1000 / 60 );
}
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function loop() {
for(var i = 0; i
{
var particle = particles[i];
particle.updatePhysics();
with(particle.position)
{
if(y
if(x>1000) x-=2000;
else if(x
if(z>1000) z-=2000;
else if(z
}
}
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
camera.lookAt(scene.position);
renderer.render( scene, camera );
}
window.onload = init;
/*背景音乐开关控制*/
$('.music').on({
'click':function(){
var flag = $(this).attr('data-flag');
if(flag == 'open'){
audio.pause();
$(this).attr('data-flag','close');
$(this).css('background','url(/cghd/201612/images/open.png)');
$(this).css('background-color','#31628d');
}else{
audio.play();
$(this).attr('data-flag','open');
$(this).css('background','url(/cghd/201612/images/close.png)');
$(this).css('background-color','#b91b10');
}
},
});
2、WAP端:https://www.huijindaicn.com/w...
注意:在wap端,canvas 元素在页面最上层,遮挡了页面下层所有元素,导致无法选中页面下层的元素,所以另外加了触摸事件,其他与PC端相同
为页面添加触摸事件,使 canvas 元素 在用户触摸屏幕时排在页面元素的最底层,代码如下:
var canvas = document.getElementsByTagName('canvas');
document.addEventListener('touchstart', function(){
canvas[0].setAttribute("style","z-index:-1");
}, false);
document.addEventListener('touchmove', function(){
canvas[0].setAttribute("style","z-index:-1");
}, false);
document.addEventListener('touchend', function(){
canvas[0].removeAttribute("style");
}, false);
html全屏飘雪花特效,html5 飘雪花动画(增加背景音乐)相关推荐
- html全屏背景视频特效,HTML5全屏背景视频特效插件Vidage.js源码
下面我们对HTML5全屏背景视频特效插件Vidage.js源码文件阐述相关使用资料和HTML5全屏背景视频特效插件Vidage.js源码文件的更新信息. HTML5全屏背景视频特效插件Vidage.j ...
- Codrops 优秀教程:基于 CSS3 的全屏网页过渡特效
向大家分享一个来自 Codrops 的基于 CSS3 实现的全屏网页过渡特效.页面初始布局是四个盒子,点击其中一个会扩张到全屏,其它的会淡出隐藏:关闭当前视图的时候又恢复到初始状态. 您可能感兴趣的相 ...
- CSS3全屏星空动态特效代码
CSS3全屏星空动态特效代码,可用于简约的星空表白页面,大气的文字内容动态背景特效. 更多源码下载:hereitis,在这里资源站,免费软件下载,PPT.图片素材下载,精品小工具小插件
- 阿里巴巴卖家如何修改html,阿里巴巴店铺装修之全屏广告轮换特效代码分享及说明...
原标题:阿里巴巴店铺装修之全屏广告轮换特效代码分享及说明 阿里巴巴店铺装修中离不开全屏轮换广告,由于阿里店铺装修原配的轮换图有点呆板,所以通过自己编写的特效代码来制作全屏轮换广告还是很有必要的. (源 ...
- html5全屏幻灯片自动切换,html5特效-全屏幻灯片切换动画,支持拖拽
html5全屏幻灯片切换动画的特效,支持拖拽,完整源码下载地址: http://pan.baidu.com/s/1nvwcLxJ 密码: dmgr 效果预览图如下: 全屏幻灯片切换动画,支持拖拽 in ...
- php网页全屏背景图代码,HTML5 body设置全屏背景图片的示例代码
用什么代码实现?不允许有白色底色产生,因为手机高度不一样 设计图要标准(750)确认是背景图(通屏底图)应用场景:移动端宣传页面或者活动页面 错误的写法:加到div中结合图片设置min-height, ...
- html全屏背景视频特效,HTML – 中心全屏背景视频
我最近玩过html5并且遇到了使用的想法 使用以下HTML代码作为网站背景的全屏视频: 另外,我使用以下css代码来正确对齐它: #video_background{ position: absolu ...
- html全屏播放js,使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍
一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...
- html全屏飘雪花特效,html5 3D飘落雪花动画特效
特效描述:html5 3D飘落雪花动画.雪花动画 代码结构 1. 引入JS 2. HTML代码 雪花飘落场景特效 body { margin: 0; padding: 0; position: rel ...
最新文章
- Linux命令 crontab的理解和使用方法
- andy the android ppt,新概念同步测试1.ppt
- mysql jdbc allow_mysql的jdbc.url携带allowMultiQueries=true参数的作用及其原理
- 【转】电脑GPS导航软件下载,教你把笔记本做成GPS
- h5 fieldset
- python a和b字符串和占位符输出_python格式化输出
- Tomcat是怎么工作的(1) -- 开篇
- Win10下如何清理优化C盘
- ZEMAX | 照明设计中实用的光学模拟方法
- Photoshop 换脸大法
- 用友系统客户端登录不上服务器,客户端不能登录服务器-用友U8
- w10如何共享计算机硬盘,电脑在win10系统下设置局域网内磁盘共享的方法
- Java-斗地主游戏(部分功能)
- android studio秘钥库文件不存在,获得SHA1以及错误java.lang.Exception: 密钥库文件不存在: keystore...
- 求星期算法c语言程序,C语言根据指定日期计算是星期几
- 十、惯性导航误差传播规律
- php中 下列哪些说法是正确的,下列PHP的判断语句中( )是正确的。
- 安全断路器市场现状及未来发展趋势分析
- 【docker】基于dockerfile编写LNMP
- 根据excel模板导出
热门文章
- VB.NET插件注册验证权限-VIP功能
- 如何在报表开发工具 FastReport Online Designer 中处理报表的 5 个函数
- html如何自动调整边框大小,css边框怎样设置长度?
- 如何查询mysql数据库大小写敏感_MySQL数据库大小写敏感的问题
- P5107 能量采集
- systemtap的安装和使用
- Python对表格中的sheet进行排序【openpyxl】工作技能整理系列
- 7月视频号直播热度榜来了,第一名单场直播热度超1500万!
- 做副业赚钱最关键的三个因素
- 2022-2028年中国新能源电力运维托管行业市场调查研究及未来趋势预测报告