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亿元.其中不仅有华为.鸿 ...
最新文章
- Java http协议概述
- 车道线检测(opencv)
- Android项目Build报错Unable to execute dx(65535问题解决方案)
- 北斗导航 | 从北一到北二再到北三,你应该知道的北斗导航系统
- SpringBoot实现懒加载@Lazy
- cocos2d-x学习 之一
- POJ 2240题(Floyd)
- 仿任务面板 跨多个RecyclerView的Item拖动 支持缩小后拖动
- nginx安装nginx-vts实现监控并打包镜像
- django实现下载功能
- MEGA视频目标检测
- 微信与QQ聊天记录从旧电脑到新电脑之间无缝备份迁移
- centos 7 拉黑IP
- postgresql安装报错
- memcached源码分析-----item锁级别与item引用计数
- 我不要你觉得交易中的十大常见问题解析
- Halcon慢慢来(卡尺找线、找圆)
- CSS制作大风车动画及花朵
- BUAA_OO 第二单元多线程电梯问题作业总结
- DFS中的回溯法(纯暴力穷举)
热门文章
- 本人精心收集的近80个国内最好的嵌入式技术相关网站和论坛和博客
- js中foreach有三种写法,你知道吗
- python可以爬取58同城代码_爬取58同城—字体反爬
- 在vue里使用reset.css
- 洛谷P2585[ZJOI2006]三色二叉树(树形DP)
- 每日安全简讯20160721
- wifi卡慢延迟高_家中无线突然很慢/卡顿怎么办?路由器增强WiFi信号的几种方法...
- 源程序清单-汽车动力性计算图表软件V1.0
- AE软件+模板+教程+各种模板资料+安装教程(自己花钱买的)
- python3.8.1中文开发文档