alert("☔Euянутнмics..!\n\n\n☔Euянутнмics is a system of rhythmical physical movements to music used to teach musical understanding (especially in Steiner schools) or for therapeutic purposes, evolved by Émile Jaques-Dalcroze. The animation and music make you a little gloomy, listen this..! \n\n\nWait a little for the background music. Without music you can't feel the animation. Just! a little time I waste. Hope you will enjoy the view. I try my level best. Thanks..! "); //DOM loader addEventListener('load', checkJSLoaded) function checkJSLoaded() { //_____ var sound = new Howl({ src: ['http://dl.dropbox.com/s/g5yoc1euxbrgsce/The%20Sound%20of%20Rain%20-%20Sad%20Piano%20Song%20%EF%BD%9CBigRicePiano%20%28%20256kbps%20cbr%20%29.mp3'] }); // Clear listener after first call. sound.once('load', function(){ sound.play(); }); //________ const canvas = document.getElementById('canv'); const c = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; //Falling Text class Text { constructor(x, y, l, tip) { //Where Text is on Grid this.x = x; this.y = y; //Visual Features this.l = l; this.tip = tip; this.b = 55; let r = Math.random(); if (r < 0.6) this.val = Math.round(Math.random() * 96); else if (r < 0.9) this.val = Math.round(Math.random() * 222); else this.val = Math.round(Math.random() * 9) } update() { if (this.b > 55) { //Changing Character if (Math.random() < 0.1) { let r = Math.random(); if (r < 0.6) this.val = Math.round(Math.random() * 96); else if (r < 0.9) this.val = Math.round(Math.random() * 222); else this.val = Math.round(Math.random() * 9) } //Fading Text Out this.b -= this.l; } else this.b = 55; } show() { //Shading Text if (this.tip && this.b == 355) c.fillStyle = 'rgb(200, 255, 200)'; else c.fillStyle = 'rgb(0, ' + this.b + ', 0)'; c.fillText(this.val, this.x, this.y); } } //Streaks Of Text class Streak { constructor(x) { //Array Holding Text Objects Belonging to This Streak this.t = []; //rainhandler let l = Math.random() * 20+ 4; let tip; if (Math.random() < 0.4) tip = true; else tip = false; for (let i = 0; i < rows; i++) { this.t[i] = new Text(x * inc + inc / 2, i * inc + inc, l, tip); } //Timing Data this.del = Math.random() * 200 + 10; this.time = 0; this.done = false; this.interval = Math.round(Math.random() * 2 + 1); this.count = 0; } run() { //When To Start Streak if (!this.done) { if (this.time < this.del) this.time++; else { this.t[0].b = 255; this.done = true; } } //Displaying Characters for (let i = rows - 1; i >= 0; i--) { this.t[i].show(); } //When To Update Characters this.count++; if (this.count > this.interval) { this.count = 0; for (let i = rows - 1; i >= 0; i--) { //Moving Streaks Down Screen if (this.t[i].b == 255) { if (i < rows - 1) this.t[i + 1].b = 255; else this.t[0].b = 255; } this.t[i].update(); } } } } let inc = 10; let cols = Math.ceil(canvas.width / inc); let rows = Math.ceil(canvas.height / inc); //Creating Streaks let s = []; for (let i = 0; i < cols; i++) s[i] = new Streak(i); c.font = inc + 'px Arial'; c.textAlign = 'center'; //Animation Loop function draw() { requestAnimationFrame(draw); c.clearRect(0, 0, canvas.width, canvas.height); //Running Streaks for (let i = 0; i < cols; i++) s[i].run(); } draw();}; $(function() { var body = $('#starshine'), template = $('.template.shine'), stars = 200, sparkle = 10; var size = 'small'; var createStar = function() { template.clone().removeAttr('id').css({ top: (Math.random() * 200) + '%', left: (Math.random() * 200) + '%', webkitAnimationDelay: (Math.random() * sparkle) + 's', mozAnimationDelay: (Math.random() * sparkle) + 's' }).addClass(size).appendTo(body); }; for(var i = 0; i < stars; i++) { if(i % 2 === 0) { size = 'small'; } else if(i % 3 === 0) { size = 'medium'; } else { size = 'large'; } createStar(); } }); /* I took help from those links: 1. https://codepen.io/Interseptive/pen/VBgGKK 2. https://stackoverflow.com/questions/20909585/html5-canvas-text-shadow-equivalent 3. https://codepen.io/riazxrazor/pen/Gjomdp 4. https://youtu.be/w8LYqP2QluQ 5. https://codepen.io/Interseptive/pen/OwdoRO ┈┈┈╲┈┈┈┈╱ ┈┈╱ ▔╲ ┈┈┃┈▇┈┈▇┈┃ ╭╮┣━━━━━━┫╭╮ ┃┃┃┈┈┈┈┈┈┃┃┃ ╰╯┃┈┈┈┈┈┈┃╰╯ ┈┈╰┓┏━━┓┏╯ ┈┈┈╰╯┈┈╰╯ 😊You r always welcome 😊 The EnD */

☔ Euянутнмicѕ..!