基于JavaScript實現(xiàn)新年賀卡特效
更新時間：2022年01月21日 09:08:46 作者：java李楊勇
本文介紹了一款超級炫酷的2022新年快樂html網(wǎng)頁特效，霓虹的城市夜景和絢爛的煙花很是特別，該html頁面還有交互效果，點擊鼠標(biāo)就會呈現(xiàn)煙花綻放的特效。需要的可以參考一下
動圖演示
一款超級炫酷的2022新年快樂html網(wǎng)頁特效，霓虹的城市夜景和絢爛的煙花很是特別，該html頁面還有交互效果，點擊鼠標(biāo)就會呈現(xiàn)煙花綻放的特效，唯美不過如此。圖片可以換成自己喜歡的夜景或人物都可以。?
主要代碼
圖片選擇引入：
html, body {
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
font-family: Montserrat, sans-serif;
background-image: url(img/pexels-photo-219692.jpeg);
background-size: cover;
background-position: center;
}
css樣式
html, body {
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
font-family: Montserrat, sans-serif;
background-image: url(img/pexels-photo-219692.jpeg);
background-size: cover;
background-position: center;
}
canvas {
mix-blend-mode: lighten;
cursor: pointer;
}
#hero {
display: inline;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: color-dodge;
}
#year {
font-size: 30vw;
color: #d0d0d0;
font-weight: bold;
}
#timeleft {
color: #fbfbfb;
font-size: 2.5vw;
text-align: center;
font-family: Lora, serif;
}
Javascirpt
const canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight,
HalfPI = Math.PI / 2,
gravity = vector.create(0, 0.35),
year = document.getElementById('year'),
timeleft = document.getElementById('timeleft'),
newyear = new Date('01/01/2020');
let objects = [],
startFireworks = false,
newYearAlready = false;
function renderTimeLeft() {
let date = new Date();
let delta = Math.abs(newyear - date) / 1000;
let hours = Math.floor(delta / 3600) % 24;
delta -= hours * 3600;
let minutes = Math.floor(delta / 60) % 60;
delta -= minutes * 60;
let seconds = Math.floor(delta % 60) + 1;
let string = '';
let DaysLeft = Math.floor((newyear - date) / (1000 * 60 * 60 * 24)),
HoursLeft = `${hours} ${hours > 1 ? 'hours' : 'hour'}`,
MinutesLeft = `${minutes} ${minutes > 1 ? 'minutes' : 'minute'}`,
SecondsLeft = `${seconds} ${seconds > 1 ? 'seconds' : 'second'}`;
if (hours > 0) string = `${HoursLeft} & ${MinutesLeft}`;else
if (minutes > 0) string = `${MinutesLeft} & ${SecondsLeft}`;else
string = `${SecondsLeft}`;
if (DaysLeft > 0) string = DaysLeft + ' days, ' + string;
string += ' until 2020';
timeleft.innerHTML = string;
}
renderTimeLeft();
setInterval(function () {
let date = new Date();
if (date >= newyear) {
if (!newYearAlready) {
year.innerHTML = '2022';
startFireworks = true;
timeleft.innerHTML = 'Happy New Year!';
}
newYearAlready = true;
} else renderTimeLeft();
}, 500);
document.body.appendChild(canvas);
function random255() {
return Math.floor(Math.random() * 100 + 155);
}
function randomColor() {
let r = random255(),
g = random255(),
b = random255();
return `rgb(${r}, ${g}, $)`;
}
class PhysicsBody {
constructor() {
objects.push(this);
}
PhysicsUpdate() {
this.lastPosition = this.position.duplicate();
this.position.addTo(this.velocity);
this.velocity.addTo(gravity);
}
deleteObject() {
objects[objects.indexOf(this)] = undefined;
}}
class firework extends PhysicsBody {
constructor() {
super();
this.position = vector.create(Math.random() * width, height);
let Velocity = vector.create(0, 0);
Velocity.setLength(Math.random() * 10 + 15);
Velocity.setAngle(Math.PI * 1.35 + Math.random() * Math.PI * 0.30);
this.velocity = Velocity;
this.trail = Math.floor(Math.random() * 4) != 1;
this.trailColor = this.trail ? randomColor() : undefined;
this.trailWidth = 2;
this.TimeCreated = new Date().getTime();
this.TimeExpired = this.TimeCreated + (Math.random() * 5 + 7) * 100;
this.BlastParticleCount = Math.floor(Math.random() * 50) + 25;
this.funky = Math.floor(Math.random() * 5) == 1;
this.exposionColor = randomColor();
}
draw() {
context.strokeStyle = this.trailColor;
context.lineWidth = this.trailWidth;
let p = this.position,
lp = this.lastPosition;
context.beginPath();
context.moveTo(lp.getX(), lp.getY());
context.lineTo(p.getX(), p.getY());
context.stroke();
}
funkyfire() {
var funky = this.funky;
for (var i = 0; i < Math.floor(Math.random() * 10); i++) {
new BlastParticle({ firework: this, funky });
}
}
explode() {
var funky = this.funky;
for (var i = 0; i < this.BlastParticleCount; i++) {
new BlastParticle({ firework: this, funky });
}
this.deleteObject();
}
checkExpire() {
let now = new Date().getTime();
if (now >= this.TimeExpired) this.explode();
}
render() {
if (this.trail) this.draw();
if (this.funky) this.funkyfire();
this.checkExpire();
}}
class BlastParticle extends PhysicsBody {
constructor({ firework, funky }) {
super();
this.position = firework.position.duplicate();
let Velocity = vector.create(0, 0);
if (!this.funky) {
Velocity.setLength(Math.random() * 6 + 2);
Velocity.setAngle(Math.random() * Math.PI * 2);
} else {
Velocity.setLength(Math.random() * 3 + 1);
Velocity.setAngle(firework.getAngle + Math.PI / 2 - Math.PI * 0.25 + Math.PI * .5);
}
this.velocity = Velocity;
this.color = firework.exposionColor;
this.particleSize = Math.random() * 4;
this.TimeCreated = new Date().getTime();
this.TimeExpired = this.TimeCreated + (Math.random() * 4 + 3.5) * 100;
}
draw() {
context.strokeStyle = this.color;
context.lineWidth = this.particleSize;
let p = this.position,
lp = this.lastPosition;
context.beginPath();
context.moveTo(lp.getX(), lp.getY());
context.lineTo(p.getX(), p.getY());
context.stroke();
}
checkExpire() {
let now = new Date().getTime();
if (now >= this.TimeExpired) this.deleteObject();
}
render() {
this.draw();
this.checkExpire();
}}
document.body.addEventListener('mousedown', function (e) {
let color = randomColor();
for (var i = 0; i < Math.floor(Math.random() * 20) + 25; i++) {
new BlastParticle({
firework: {
position: vector.create(e.pageX, e.pageY),
velocity: vector.create(0, 0),
exposionColor: color },
funky: false });
}
});
setInterval(function () {
if (!startFireworks) return;
for (var i = 0; i < Math.floor(Math.random() * 4); i++) {
new firework();
}
}, 500);
function cleanupObjects() {
objects = objects.filter(o => o != undefined);
}
function loop() {
context.fillStyle = 'rgba(0,0,0,0.085)';
context.fillRect(0, 0, width, height);
let unusedObjectCount = 0;
objects.map(o => {
if (!o) {unusedObjectCount++;return;}
o.PhysicsUpdate();
o.render();
});
if (unusedObjectCount > 100) cleanupObjects();
requestAnimationFrame(loop);
}
loop();
到此這篇關(guān)于基于JavaScript實現(xiàn)新年賀卡特效的文章就介紹到這了,更多相關(guān)JavaScript新年賀卡特效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
將json轉(zhuǎn)換成struts參數(shù)的方法
下面小編就為大家?guī)硪黄獙son轉(zhuǎn)換成struts參數(shù)的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了ionic2 tabs 圖標(biāo)自定義,需要的朋友可以參考下2017-03-03
JS實現(xiàn)跟隨鼠標(biāo)的鏈接文字提示框效果
這篇文章主要介紹了JS實現(xiàn)跟隨鼠標(biāo)的鏈接文字提示框效果,涉及javascript鼠標(biāo)事件及頁面元素樣式操作的相關(guān)技巧,非常簡單實用,需要的朋友可以參考下2015-08-08
js的延遲加載有助與提高頁面的加載速度,下面這篇文章主要給大家介紹了關(guān)于js延遲加載的6種方式,文中通過圖文介紹的非常詳細(xì),對大家學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-04-04
Bootstrap carousel輪轉(zhuǎn)圖的使用實例詳解
圖片輪播效果在Web中常常能看到，很多人也稱之為幻燈片。這篇文章主要給大家介紹Bootstrap carousel輪轉(zhuǎn)圖的使用實例詳解，需要的朋友可以參考下2016-05-05
本文給大家分享一段js代碼實現(xiàn)輸入表格行數(shù)、列數(shù)自動生成表格源代碼，非常不錯具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
JavaScript實現(xiàn)簡單抽獎系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡單抽獎系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
IE中jscript/javascript的條件編譯...2006-09-09
用Aptana軟件來調(diào)試javascript的方法，一般情況下大家都使用firefox瀏覽器+firebug來調(diào)試的。2009-11-11
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)鼠標(biāo)拖拽div左右滑動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01