From af5c8a18c05350e2e198bba41211a281dcc39064 Mon Sep 17 00:00:00 2001 From: dan63047 Date: Sun, 15 Aug 2021 22:33:18 +0300 Subject: [PATCH] third secton for time +effect from mostlikers.com/2016/11/create-fireworks-animation-effects.html --- index.html | 13 +- jquery.fireworks.js | 304 ++++++++++++++++++++++++++++++++++++++++++++ main.css | 8 -- script.js | 57 ++++----- 4 files changed, 337 insertions(+), 45 deletions(-) create mode 100644 jquery.fireworks.js diff --git a/index.html b/index.html index 917eb54..cd2e4b1 100644 --- a/index.html +++ b/index.html @@ -81,13 +81,15 @@

До нового года осталось:

-
- +
-
  :  
+
:
-
- + +
+
:
+
+
@@ -103,6 +105,7 @@ + diff --git a/jquery.fireworks.js b/jquery.fireworks.js new file mode 100644 index 0000000..13152da --- /dev/null +++ b/jquery.fireworks.js @@ -0,0 +1,304 @@ +/* +Adapted from http://jsfiddle.net/dtrooper/AceJJ/ + +TODO: + * Try to get rid of ghosting + * See if anything can be made more efficient + * Make the canvas fit in the z-order +*/ + +(function( $ ) { + var MAX_ROCKETS = 5, + MAX_PARTICLES = 1000; + + var FUNCTIONS = { + 'init': function(element) { + var jqe = $(element); + + // Check this element isn't already inited + if (jqe.data('fireworks_data') !== undefined) { + console.log('Looks like this element is already inited!'); + return; + } + + // Setup fireworks on this element + var canvas = document.createElement('canvas'), + canvas_buffer = document.createElement('canvas'), + data = { + 'element': element, + 'canvas': canvas, + 'context': canvas.getContext('2d'), + 'canvas_buffer': canvas_buffer, + 'context_buffer': canvas_buffer.getContext('2d'), + 'particles': [], + 'rockets': [] + }; + + // Add & position the canvas + if (jqe.css('position') === 'static') { + element.style.position = 'relative'; + } + element.appendChild(canvas); + canvas.style.position = 'absolute'; + canvas.style.top = '0px'; + canvas.style.bottom = '0px'; + canvas.style.left = '0px'; + canvas.style.right = '0px'; + + // Kickoff the loops + data.interval = setInterval(loop.bind(this, data), 1000 / 50); + + // Save the data for later + jqe.data('fireworks_data', data); + }, + 'destroy': function(element) { + var jqe = $(element); + + // Check this element isn't already inited + if (jqe.data('fireworks_data') === undefined) { + console.log('Looks like this element is not yet inited!'); + return; + } + var data = jqe.data('fireworks_data'); + jqe.removeData('fireworks_data'); + + // Stop the interval + clearInterval(data.interval); + + // Remove the canvas + data.canvas.remove(); + + // Reset the elements positioning + data.element.style.position = ''; + } + }; + + $.fn.fireworks = function(action) { + // Assume no action means we want to init + if (!action) { + action = 'init'; + } + + // Process each element + this.each(function() { + FUNCTIONS[action](this); + }); + + // Chaining ftw :) + return this; + }; + + function launch(data) { + if (data.rockets.length < MAX_ROCKETS) { + var rocket = new Rocket(data); + data.rockets.push(rocket); + } + } + + function loop(data) { + // Launch a new rocket + launch(data); + + // Update screen size + if (data.canvas_width != data.element.offsetWidth) { + data.canvas_width = data.canvas.width = data.canvas_buffer.width = data.element.offsetWidth; + } + if (data.canvas_height != data.element.offsetHeight) { + data.canvas_height = data.canvas.height = data.canvas_buffer.height = data.element.offsetHeight; + } + + // Fade the background out slowly + data.context_buffer.clearRect(0, 0, data.canvas.width, data.canvas.height); + data.context_buffer.globalAlpha = 0.9; + data.context_buffer.drawImage(data.canvas, 0, 0); + data.context.clearRect(0, 0, data.canvas.width, data.canvas.height); + data.context.drawImage(data.canvas_buffer, 0, 0); + + // Update the rockets + var existingRockets = []; + data.rockets.forEach(function(rocket) { + // update and render + rocket.update(); + rocket.render(data.context); + + // random chance of 1% if rockets is above the middle + var randomChance = rocket.pos.y < (data.canvas.height * 2 / 3) ? (Math.random() * 100 <= 1) : false; + + /* Explosion rules + - 80% of screen + - going down + - close to the mouse + - 1% chance of random explosion + */ + if (rocket.pos.y < data.canvas.height / 5 || rocket.vel.y >= 0 || randomChance) { + rocket.explode(data); + } else { + existingRockets.push(rocket); + } + }); + data.rockets = existingRockets; + + // Update the particles + var existingParticles = []; + data.particles.forEach(function(particle) { + particle.update(); + + // render and save particles that can be rendered + if (particle.exists()) { + particle.render(data.context); + existingParticles.push(particle); + } + }); + data.particles = existingParticles; + + while (data.particles.length > MAX_PARTICLES) { + data.particles.shift(); + } + } + + function Particle(pos) { + this.pos = { + x: pos ? pos.x : 0, + y: pos ? pos.y : 0 + }; + this.vel = { + x: 0, + y: 0 + }; + this.shrink = .97; + this.size = 2; + + this.resistance = 1; + this.gravity = 0; + + this.flick = false; + + this.alpha = 1; + this.fade = 0; + this.color = 0; + } + + Particle.prototype.update = function() { + // apply resistance + this.vel.x *= this.resistance; + this.vel.y *= this.resistance; + + // gravity down + this.vel.y += this.gravity; + + // update position based on speed + this.pos.x += this.vel.x; + this.pos.y += this.vel.y; + + // shrink + this.size *= this.shrink; + + // fade out + this.alpha -= this.fade; + }; + + Particle.prototype.render = function(c) { + if (!this.exists()) { + return; + } + + c.save(); + + c.globalCompositeOperation = 'lighter'; + + var x = this.pos.x, + y = this.pos.y, + r = this.size / 2; + + var gradient = c.createRadialGradient(x, y, 0.1, x, y, r); + gradient.addColorStop(0.1, "rgba(255,255,255," + this.alpha + ")"); + gradient.addColorStop(0.8, "hsla(" + this.color + ", 100%, 50%, " + this.alpha + ")"); + gradient.addColorStop(1, "hsla(" + this.color + ", 100%, 50%, 0.1)"); + + c.fillStyle = gradient; + + c.beginPath(); + c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size : this.size, 0, Math.PI * 2, true); + c.closePath(); + c.fill(); + + c.restore(); + }; + + Particle.prototype.exists = function() { + return this.alpha >= 0.1 && this.size >= 1; + }; + + function Rocket(data) { + Particle.apply( + this, + [{ + x: Math.random() * data.canvas.width * 2 / 3 + data.canvas.width / 6, + y: data.canvas.height + }] + ); + + this.explosionColor = Math.floor(Math.random() * 360 / 10) * 10; + this.vel.y = Math.random() * -3 - 4; + this.vel.x = Math.random() * 6 - 3; + this.size = 2; + this.shrink = 0.999; + this.gravity = 0.01; + } + + Rocket.prototype = new Particle(); + Rocket.prototype.constructor = Rocket; + + Rocket.prototype.explode = function(data) { + var count = Math.random() * 10 + 80; + + for (var i = 0; i < count; i++) { + var particle = new Particle(this.pos); + var angle = Math.random() * Math.PI * 2; + + // emulate 3D effect by using cosine and put more particles in the middle + var speed = Math.cos(Math.random() * Math.PI / 2) * 15; + + particle.vel.x = Math.cos(angle) * speed; + particle.vel.y = Math.sin(angle) * speed; + + particle.size = 10; + + particle.gravity = 0.2; + particle.resistance = 0.92; + particle.shrink = Math.random() * 0.05 + 0.93; + + particle.flick = true; + particle.color = this.explosionColor; + + data.particles.push(particle); + } + }; + + Rocket.prototype.render = function(c) { + if (!this.exists()) { + return; + } + + c.save(); + + c.globalCompositeOperation = 'lighter'; + + var x = this.pos.x, + y = this.pos.y, + r = this.size / 2; + + var gradient = c.createRadialGradient(x, y, 0.1, x, y, r); + gradient.addColorStop(0.1, "rgba(255, 255, 255 ," + this.alpha + ")"); + gradient.addColorStop(0.2, "rgba(255, 180, 0, " + this.alpha + ")"); + + c.fillStyle = gradient; + + c.beginPath(); + c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size / 2 + this.size / 2 : this.size, 0, Math.PI * 2, true); + c.closePath(); + c.fill(); + + c.restore(); + }; +}(jQuery)); diff --git a/main.css b/main.css index da1c4e4..f807b42 100644 --- a/main.css +++ b/main.css @@ -46,12 +46,4 @@ body { } .didts { display: inline-block; -} - -.didts-text { - display: block; - font-size: 16px; -} -.didts-text:first-child{ - padding-right: 50%; } \ No newline at end of file diff --git a/script.js b/script.js index a636b23..38417f5 100644 --- a/script.js +++ b/script.js @@ -72,9 +72,9 @@ function changeBackgroundColor() { function initializeClock(endtime) { var num1 = document.getElementById('num1'); var num2 = document.getElementById('num2'); - var textnum1 = document.getElementById('text-num1'); - var textnum2 = document.getElementById('text-num2'); - var dots = document.getElementById('separator'); + var num3 = document.getElementById('num3'); + var dots1 = document.getElementById('separator1'); + var dots2 = document.getElementById('separator2'); var debug1 = document.getElementById('endtime'); var debug2 = document.getElementById('left'); var debug3 = document.getElementById('fulltimer'); @@ -82,52 +82,44 @@ function initializeClock(endtime) { function updateClock() { var t = getTimeRemaining(endtime); - if (t.days > 99){ - num1.innerHTML = t.days; + if (t.days > 0) { + num1.innerHTML = (t.days > 99) ? t.days : ('0' + t.days).slice(-2); + dots1.innerHTML = "д.   "; + dots1.style.fontSize = "3rem"; + dots1.style.width = dots2.style.width; num2.innerHTML = ('0' + t.hours).slice(-2); - textnum1.innerHTML = 'Дней'; - textnum2.innerHTML = 'Часов'; - document.title = t.days + " дн. до НГ"; - } - else if (t.days > 0) { - num1.innerHTML = ('0' + t.days).slice(-2); - num2.innerHTML = ('0' + t.hours).slice(-2); - textnum1.innerHTML = 'Дней'; - textnum2.innerHTML = 'Часов'; + num3.innerHTML = ('0' + t.minutes).slice(-2); document.title = t.days + " дн. до НГ"; } else if (t.hours > 0) { num1.innerHTML = ('0' + t.hours).slice(-2); + dots1.innerHTML = ":"; + dots1.style.fontSize = "1em"; num2.innerHTML = ('0' + t.minutes).slice(-2); - textnum1.innerHTML = 'Часов'; - textnum2.innerHTML = 'Минут'; + num3.innerHTML = ('0' + t.seconds).slice(-2); document.title = t.hours + " ч. до НГ"; } - else if (t.minutes > 0) { + else if (t.total > 0) { num1.innerHTML = ('0' + t.minutes).slice(-2); num2.innerHTML = ('0' + t.seconds).slice(-2); - textnum1.innerHTML = 'Минут'; - textnum2.innerHTML = 'Секунд'; - document.title = t.minutes + " мин. до НГ"; - } - else if (t.total > 0) { - num1.innerHTML = ('0' + t.seconds).slice(-2); - num2.innerHTML = ('0' + t.seconds1_100).slice(-2); - dots.innerHTML = "  .  " - textnum1.innerHTML = ''; - textnum2.innerHTML = ''; - document.title = t.seconds + " сек. до НГ"; + num3.innerHTML = ('0' + t.seconds1_100).slice(-2); + dots2.innerHTML = "."; + document.title = (t.total <= 60000) ? t.seconds + " сек. до НГ" : t.minutes + " мин. до НГ"; } else { num1.innerHTML = "00"; num2.innerHTML = "00"; + num3.innerHTML = "00"; clearInterval(timeinterval); document.title = "С новым годом!"; var congrats = document.getElementById("congrats"); congrats.innerHTML = "C новым годом!!!\nСчасливого " + future_year + " года!"; + setTimeout(function() { + $('body').fireworks(); + }); }; - dots.style.color = ((t.seconds % 2) || (t.total <= 60000)) ? "#fff":"#fff0"; - changeBackgroundColor(); + dots1.style.color = ((t.seconds % 2) || (t.total <= 3600000) || (t.days > 0)) ? "#fff":"#fff0"; + dots2.style.color = ((t.seconds % 2) || (t.total <= 3600000)) ? "#fff":"#fff0"; debug2.innerHTML = t.total.toLocaleString('ru'); debug3.innerHTML = t.days + ':' + ('0' + t.hours).slice(-2) + ':' + ('0' + t.minutes).slice(-2) + ':' + ('0' + t.seconds).slice(-2) + '.' + ('00' + t.mseconds).slice(-3); } @@ -140,6 +132,7 @@ let d_for_setting = new Date(); let future_year = (d_for_setting.getMonth() == 0 && d_for_setting.getDate() < 7) ? d_for_setting.getFullYear() : d_for_setting.getFullYear() + 1 document.getElementById("future_year").innerHTML = future_year; initializeClock("Jan 01 " + future_year + " 00:00:00"); -// initializeClock("Feb 12 2021 22:03:00"); +//initializeClock("Aug 15 2021 22:17:00"); DateTime(); -setInterval(DateTime, 1000 / 60); \ No newline at end of file +setInterval(DateTime, 1000/60); +setInterval(changeBackgroundColor, 1000/60); \ No newline at end of file