To finish snowfall tutorials series I need to show you one way to create snow animation on the web page. In the last January I posted the CSS snowfall tutorial, where to create the snow effect you need to use png files (click here to see the tutorial), yesterday I posted the tutorial using only pure CSS to create the snow effect (click here to see the tutorial), and today I am gonna show you how to create the animation on the canvas.
Do you like this image? Check more images in theĀ store.
Which way to create the snow effect animation is the best? Well, that is up to you. Check them out!
JS Canvas Snowfall:
*animation opened in the Firefox browser. *to see the live output of the animation click here.
A progress bar can be used to show a user how far along he/she is in a process ( such as a download, file transfer, or installation).
Do you like this image? Check more images in the store.
In this tutorial, you’ll learn how to create a simple progress bar using JavaScript, and after that, we’ll add some CSS and jQuery to create an animated progress bar.
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 20);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
elem.innerHTML = width + "%";
}
}
}
}
Output:
II. Bee Progress Bar
Now, when you know how the progress bar works we will do step ahead!
*animation opened in the Safari browser. *to see the live output of the animation click here.
To create the Bee Progress Bar follow the steps below:
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("bar");
var width = 10;
var id = setInterval(frame, 15);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
elem.innerHTML = width + "%";
}
}
}
}
To see the live output of the animation go to lenastanley.com.
Do you like sketching? Did you know that you can sketch on Java Script canvas too?
*animation opened in the Safari browser. To see the live output of the animation click here.
What do you need to do?
To create the JavaScript sketch board you need to have the pencil cursor in .png/ SVG format (for practising you can use mine below) and follow the steps below:
Note: To generate a random number of the dice dots we need to use Math.floor(Math.random() * 6) + 1; If Math.random() were to roll 0.9, we take that and multiply it by 6 which gives us 5.4. Then we take the floor of that which is 5. Then we add 1 which gives us a final result of 6. So the random numbers will only be between 1 and 6.
var elDiceOne = document.getElementById('dice1');
var elDiceTwo = document.getElementById('dice2');
var elComeOut = document.getElementById('roll');
elComeOut.onclick = function () {rollDice();};
function rollDice() {
var diceOne = Math.floor((Math.random() * 6) + 1);
var diceTwo = Math.floor((Math.random() * 6) + 1);
console.log(diceOne + ' ' + diceTwo);
for (var i = 1; i <= 6; i++) {
elDiceOne.classList.remove('show-' + i);
if (diceOne === i) {
elDiceOne.classList.add('show-' + i);
}
}
for (var k = 1; k <= 6; k++) {
elDiceTwo.classList.remove('show-' + k);
if (diceTwo === k) {
elDiceTwo.classList.add('show-' + k);
}
}
setTimeout(rollDice(), 1000);
}
To see the live output of the animation go to lenastanley.com.
*animation opened in the Safari browser. To see the live output of the animation click here.
To create the animation you need to have two images of the luggage (closed and open) in SVG/ png format (to practise only you can use mine which I drew in Adobe Illustrator CC) and follow the steps below:
*animation opened in the Safari browser. To see the live output click here.
What do you need to do?
To create coin flip animation you will need two images of the coin (front and back) in .png format (to practise you can use these below) and follow the steps below:
Add HTML
Add CSS
Add CSS Animation
Add JavaScript
Step1.
Add HTML
<div id="coin"></div>
<div id="button">Toss a coin</div>
