Shulou(Shulou.com)06/02 Report--

Editor to share with you how to use JavaScript to achieve New year's greeting card special effects, I hope you will learn something after reading this article, let's discuss it together!

Moving picture demonstration

A super cool 2022 Happy New year html web page special effects, neon city night view and gorgeous fireworks are very special, the html page has interactive effects, the click of the mouse will show fireworks special effects, so much for beauty. The picture can be changed into your favorite night scene or character.

Main code

Picture selection introduces:

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 style 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 } Javascirptconst 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 ('01amp 01max 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 [XSS _ clean] = string;} renderTimeLeft () SetInterval (function () {let date = new Date (); if (date > = newyear) {if (! newYearAlready) {yearn [XSS _ clean] = '2022 years; startFireworks = true; timeleft [XSS _ clean] =' Happy New Yearrings;} newYearAlready = true;} else renderTimeLeft () Document.body.appendChild (canvas); function random255 () {return Math.floor (Math.random () * 100155);} function randomColor () {let r = random255 (), g = random255 (), b = random255 (); return `rgb (${r}, ${g}, ${b}) ` } 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'; context.fillRect (0d0, width, height); let unusedObjectCount = 0; objects.map (o = > {if (! o) {unusedObjectCount++;return;} o.PhysicsUpdate (); o.render ();}) If (unusedObjectCount) cleanupObjects (); requestAnimationFrame (loop);} loop (); what language is javascript? javascript is a dynamically typed, weakly typed language, based on object and event-driven, relatively secure and widely used in client-side web page development. it is also a widely used scripting language for client-side Web development. It is mainly used to add dynamic functions to HTML web pages, and now JavaScript can also be used in web servers, such as Node.js.

After reading this article, I believe you have a certain understanding of "how to use JavaScript to achieve New year's card special effects". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.