Happy New Year 2013
Today – New Year’s Eve Day. And we would like to congratulate all of our readers to this wonderful event. Thank you for being with us from the beginning, feel free to visit our website and in the New Year where you will find a great variety of new tutorials and articles. Today we have prepared an interesting html5 postcard for Christmas and New Year. This is animated Snowflakes at canvas.
Welcome to test our demonstration, and download the sources
Live Demo
Live Demo 2
download in package
Step 1. HTML Markup
As usual for html5 tutorials – our HTML markup is very easy:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Happy New Year 2013 - HTML5 card | Script Tutorials</title> <link rel="stylesheet" href="css/main.css" type="text/css" /> <script src="js/script.js"></script> </head> <body> <header> <h2>Happy New Year 2013 - HTML5 card (<a href="https://www.script-tutorials.com/happy-new-year-2013/">Back to original tutorial</a>)</h2> </header> <canvas id="panel">HTML5 compliant browser required</canvas> </body> </html>
There is only single canvas element. We are going to make full screen canvas with festive background image.
Step 2. JS
Now, we please create an empty file ‘js/script.js’ and put next code inside:
// canvas and context objects var canvas, ctx; //Snowflakes object Snowflakes = (function () { // sprites information var sprCnt = 15; var sprWidth = 80; var sprHeight = 68; // arrays of snowflakes and sprites var snowflakes = []; var snowflakeSprites = []; // other inner params var minScale = 0.2; // min scale for flakes var maxScale = 1.2; // max scale for flakes var minVerticalVelocity = 2; // min vertical velocity var maxVerticalVelocity = 5; // max vertical velocity var minHorizontalVelocity = -2; // min horizontal velocity var maxHorizontalVelocity = 3; // max horizontal velocity var minOpacity = 0.1; // min opacity var maxOpacity = 0.9; // max opacity var maxOpacityIncrement = 60; // opacity increment // every flake swings in the interim between next deltas: var minHorizontalDelta = 1; var maxHorizontalDelta = 4; var speed = 2; // speed // get random number between x1 and x2 function getRandom(x1, x2) { return Math.random() * (x2 - x1) + x1 } // initialize sprites function initializeSprites() { var img = new Image(); img.onload = function () { // fill snowflakeSprites with every sprite of sprite.png for (var i = 0; i < sprCnt; i++) { // create new canvas var sprite = document.createElement('canvas'); sprite.width = sprWidth; sprite.height = sprHeight; var context = sprite.getContext('2d'); // and draw every sprite at this canvas context.drawImage(img, i * sprWidth, 0, sprWidth, sprHeight, 0, 0, sprWidth, sprHeight); // and fill array snowflakeSprites.push(sprite); } } img.src = './sprite.png'; }; // initialize snowflakes function initialize(number) { // initialize sprites initializeSprites(); // prepare a necessary amount of snowflakes for (var i = 0; i < number; i++) { snowflakes.push(initializeSnowflake()); } }; // initialize snowflake function initializeSnowflake() { // get random scale var scale = getRandom(minScale, maxScale); return { x: Math.random() * ctx.canvas.width, // x and y: Math.random() * ctx.canvas.height, // y positions vv: getRandom(minVerticalVelocity, maxVerticalVelocity), // vertical and hv: getRandom(minHorizontalVelocity, maxHorizontalVelocity), // horizontal velocity o: getRandom(minOpacity, maxOpacity), // opacity oi: Math.random() / maxOpacityIncrement, // opacity increment mhd: getRandom(minHorizontalDelta, maxHorizontalDelta), // maximum horizontal delta hd: 0, // horizontal delta hdi: Math.random() / (maxHorizontalVelocity * minHorizontalDelta), // horizontal delta increment sw: scale * sprWidth, // scaled sprite width sh: scale * sprHeight, // and height si: Math.ceil(Math.random() * (sprCnt - 1)) // sprite index } }; // move flakes function moveFlakes() { for (var i = 0; i < snowflakes.length; i++) { var osf = snowflakes[i]; // shift X and Y position osf.x += (osf.hd + osf.hv) * speed; osf.y += osf.vv * speed; // swings osf.hd += osf.hdi; if (osf.hd < -osf.mhd || osf.hd > osf.mhd) { osf.hdi = -osf.hdi; }; // collision with borders if (osf.y > ctx.canvas.height + sprHeight / 2) { osf.y = 0 }; if (osf.y < 0) { osf.y = ctx.canvas.height }; if (osf.x > ctx.canvas.width + sprWidth / 2) { osf.x = 0 }; if (osf.x < 0) { osf.x = ctx.canvas.width }; // toggle opacity osf.o += osf.oi; if (osf.o > maxOpacity || osf.o < minOpacity) { osf.oi = -osf.oi }; if (osf.o > maxOpacity) osf.o = maxOpacity; if (osf.o < minOpacity) osf.o = minOpacity; } } // render frame function renderFrame() { // move (shift) our flakes moveFlakes(); // clear content ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // draw each flake for (var i = 0; i < snowflakes.length; i++) { var osf = snowflakes[i]; ctx.globalAlpha = osf.o; ctx.drawImage(snowflakeSprites[osf.si], 0, 0, sprWidth, sprHeight, osf.x, osf.y, osf.sw, osf.sh); } } return { 'initialize': initialize, 'render': renderFrame, } })(); // main initialization function initialization() { // create canvas and context objects canvas = document.getElementById('panel'); ctx = canvas.getContext('2d'); // set canvas size - fullscreen ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight; // loop main scene setInterval(Snowflakes.render, 40); Snowflakes.initialize(100); } // window onload event handler if (window.attachEvent) { window.attachEvent('onload', initialization); } else { if (window.onload) { var curronload = window.onload; var newonload = function() { curronload(); initialization(); }; window.onload = newonload; } else { window.onload = initialization; } }
The main concept is: in the beginning we resize our canvas object (we have to make it fullscreen), then, we initialize our snowflakes (we have to initialize various sprite images and snowflake objects), once we are ready – we can start rendering frames. Render function cleans our canvas and draws every single flake. In addition, we have to move every snowflake (download it) from left to right and back again.
Step 3. CSS
We used a very simple technique to lock full-screen background image:
body { overflow:hidden; background: url("../christmas_tree1.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
Live Demo
Conclusion
Happy New Year. I hope that you like our articles and experiments. Welcome back.
Great!
Happy new year.
Thanks for share!
HAPPY NEW YEAR
Thanks, Happy New Year! :)
good!
HAPPY NEW YEAR!