html中实现雪花飞舞,京东双12年终盛宴雪花飞舞3D视觉特效
这是一款京东为配合双12年终盛宴活动在活动页面添加的雪花飞舞3D视觉特效。该雪花特效在页面中构建了一个3D雪花场景,在里面制作出非常有层次感的雪花飞舞效果,并且可以通过鼠标和雪花场景进行互动。
使用方法
HTML结构
该雪花飞舞使用一个空的
CSS样式
需要为雪花场景添加一些必要的CSS样式。
.snow-container{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 100001;
}
初始化插件
在页面页面中引入three.js文件,然后调用randomRange()方法制作随机场景范围,最后在页面DOM元素加载完毕之后通过THREE.js来完成雪花场景的构建,以及添加相应的鼠标互动和移动触摸互动事件。
var container=document.querySelector(".snow-container");
if(/MSIE 6|MSIE 7|MSIE 8/.test(navigator.userAgent)){return}
else{
if(/MSIE 9|MSIE 10/.test(navigator.userAgent)){
$(container).css("height",$(window).height()).bind("click",function(){
$(this).fadeOut(1000, function(){
$(this).remove()
})
})
}
}
var containerWidth=$(container).width();
var containerHeight=$(container).height();
var particle;
var camera;
var scene;
var renderer;
var mouseX=0;
var mouseY=0;
var windowHalfX=window.innerWidth/2;
var windowHalfY=window.innerHeight/2;
var particles=[];
var particleImage=new Image();
particleImage.src="img/snow.png";
var snowNum=500;
function init(){
camera=new THREE.PerspectiveCamera(75,containerWidth/containerHeight,1,10000);
camera.position.z=1000;
scene=new THREE.Scene();
scene.add(camera);
renderer=new THREE.CanvasRenderer();
renderer.setSize(containerWidth,containerHeight);
var material=new THREE.ParticleBasicMaterial({map:new THREE.Texture(particleImage)});
for(var i=0;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);
document.addEventListener("touchstart",onDocumentTouchStart,false);
document.addEventListener("touchmove",onDocumentTouchMove,false);
setInterval(loop,1000/40);
}
function onDocumentMouseMove(event){
mouseX=event.clientX-windowHalfX;
mouseY=event.clientY-windowHalfY;
}
function onDocumentTouchStart(event){
if(event.touches.length==1){
event.preventDefault();
mouseX=event.touches[0].pageX-windowHalfX;
mouseY=event.touches[0].pageY-windowHalfY;
}
}
function onDocumentTouchMove(event){
if(event.touches.length==1){
event.preventDefault();
mouseX=event.touches[0].pageX-windowHalfX;
mouseY=event.touches[0].pageY-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
z+=2000;
}
}
}}
camera.position.x+=(
mouseX-camera.position.x)*0.005;
camera.position.y+=(-mouseY-camera.position.y)*0.005;
camera.lookAt(scene.position);
renderer.render(scene,camera)
}
init()
});
html中实现雪花飞舞,京东双12年终盛宴雪花飞舞3D视觉特效相关推荐
- 2018阿里云双12年终大促主会场全攻略
2018阿里云双12年终大促活动已经于12月7日正式开启,从已开放的活动页面来看,活动分为两个阶段: 12月7日-12月23日的拉新返现阶段和12月24日-12月28日的TOP100英雄榜PK阶段. ...
- 双12营销大战:淘宝防御、京东低调、国美在线进击
双11刚刚结束没多久,双12战役又已拉开序幕,淘宝.京东和国美在线继续鏖战互联网,使尽浑身解数吸引用户来一场年终狂欢.不过,从笔者所收集到的信息来看,几家电商平台在双12期间的营销策略已经大不相同,在 ...
- 2021京东双十二是什么时候?2021年双12京东有什么活动?
2021京东双十二是什么时候?2021年双12京东有什么活动? 11月11日京东双十一活动是已经结束了,相信大家都有一些未购买的商品,那么接下来的京东双十二是种草时间了,许多小伙伴都已经在期待京东双十 ...
- 从京东双11战报中,找到未来值得国产品牌看好的发展机遇
根据京东公布的双11开门红28小时战报数据,从10月31日晚8点至11月1日24时,京东累计售出商品超5.5亿件.并且在成交额前20的品牌中,中国品牌占比达80%.可以看出,今年国产品牌铆足干劲,乘势 ...
- 从最新财报中,我看到京东“四面楚歌”
文|螳螂观察 作者|陈浩南 2017年,刘强东曾放言京东要花5年时间超过天猫,成为国内第一的B2C平台.尽管当时京东尚处于"战略性亏损"阶段,但彼时京东肯定坚信"今天的亏 ...
- 双11还是那个双11,双12却早已不是那个双12
(图片来源于网络) 文 | 易不二 来源 | 螳螂财经(ID:TanglangFin) 1936年12月12日,张学良和杨虎城在西安发动的兵谏,致使蒋介石停止内战,一致抗日,从而,为抗日战争胜利.新中 ...
- 京东双 11 大促价疑遭提前泄露;库克:iPhone 11 中国定价策略成功;GitLab 重大安全版本更新 | 极客头条...
整理 | 屠敏 快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「CSDN 极客头条」,是从 CSDN 网站延伸至官方微信公众号的特别栏目,专注于一天业界事报道.风里雨里,我们将每天为朋友 ...
- 天猫双12爬虫(福利:266万条商品数据免费下载)
前言: 继:<天猫双11爬虫(福利:212万条商品数据免费下载)>. 天猫双12商品原始数据\color{red}{天猫双12商品原始数据} 链接:http://pan.baidu.com ...
- 实在智能RPA@你:再赢双12,店铺转化率靠这些
截至11月11日0点45分,382个品牌成交额破1亿元. 据每日经济新闻消息,天猫双十一成交额 :从11月1日0点到11日0点45分,已有382个品牌在天猫双11的成交额超过1亿元.其中不仅有华为.鸿 ...
最新文章
- python 爬取手机app的信息
- AI矢量绘图软件技能学习视频教程
- html表格显示选择的颜色,jquery实现效果比较好的table选中行颜色
- DataScience:深入探讨与分析机器学习中的数据处理之线性变换—标准化standardization、归一化Normalization/比例化Scaling的区别与联系
- centos查看当前目录下文件大小_centos Linux 统计某个文件夹占用空间大小
- Sql Server之旅——第十站 简单说说sqlserver的执行计划
- 2015/4/14课堂练习
- selenium+linux+python,Linux下Python+selenium自动化环境搭建
- Python的数据类型与结构
- windows和Linux虚拟机或者云主机之间传输文件
- 基于大数据的智慧旅游数据分析系统
- 【作图】origin制作图中图
- 永凯APS生产排程软件同时考虑物料及产能
- AISC/FPGA设计中 硬件UART波特率误差计算
- MT6577/MT6589处理器参数对比分析
- Kafka高性能之页缓存(page cache)使用
- 微信朋友圈python广告评论_利用Python让你的微信朋友圈与众不同,更加高大上
- 判断IE版本并给出提示升级浏览器
- 阳光直射对计算机有影响吗,办公电脑需要注意的风水
- 七个好用且免费的在线代码编辑器,你喜欢哪个?