I created Snow Flakes When I reduce the value to generate snow flakes as something like
window.setTimeout(generateSnow, 1);
or If i increase the snow flakes appearance in loop as like
// generate snow using a for loop
for(i=0; i<20; i++){
....
....
}
By using this it webpage get it slow sometimes it ask the popup to debug script or stop script. I am not sure how to solve this inorder to work with any number of flakes. Or Whether I did some mistakes ? Here is the FIDDLE
EDITED:
$(document).ready(function(){
// get the height and width of the browser window
var windowHeight = $(window).height();
var windowWidth = $(window).width();
// set the height and width of the #snowingScreen div equivalent to that of the window's
$('#snowingScreen').css('height', windowHeight);
$('#snowingScreen').css('width', windowWidth);
// this function is to generate snow randomly scattered around screen
function generateSnow() {
// generate snow using a for loop
for(i=0; i<4; i++){
// randomize the top position of the snow
var snowTop = Math.floor(Math.random()* (windowHeight/2) );
// randomize the left position of the snow
var snowLeft = Math.floor(Math.random()* (windowWidth - 10) );
// appending the snow to the #snowingScreen
$('body').append(
// generate the div representing the snow and setting properties using various jQuery methods
$('<div />')
.addClass('snow')
.css('top', snowTop)
.css('left', snowLeft)
.css('position','absolute')
.html('*')
.click(function() {
alert('You Clicked');
})
);
}
// repeat the generateSnow() function
window.setTimeout(generateSnow, 1);
}
// this function is to alter the top of each snow, using the handy .each() jQuery method
function snowFalling(){
// move the snow
$('.snow').each(function(key, value){
// check if the snow has reached the bottom of the screen
if( parseInt($(this).css('top')) > windowHeight - 80 ) {
// remove the snow from the HTML DOM structure
$(this).remove();
}
// set up a random speed
var fallingSpeed = Math.floor(Math.random() * 5 + 1);
// set up a random direction for the snow to move
var movingDirection = Math.floor(Math.random()*2);
// get the snow's current top
var currentTop = parseInt($(this).css('top'));
// get the snow's current top
var currentLeft = parseInt($(this).css('left'));
// set the snow's new top
$(this).css('top', currentTop + fallingSpeed );
// check if the snow should move to left or move to right
if( movingDirection === 0){
// set the snow move to right
$(this).css('left', currentLeft + fallingSpeed );
}else {
// set the snow move to left
$(this).css('left', currentLeft + -(fallingSpeed) );
}
});
// repeat the rollIt() function for each 200 microseconds
window.setTimeout(snowFalling, 200);
}
// call the function when the document is loaded completely
generateSnow();
snowFalling();
});
Any Suggestion would be great.
There will be better solution using css3 animation or jquery animation but following changes make your code responsive demo
$(document).ready(function(){
// get the height and width of the browser window
var windowHeight = $(window).height();
var windowWidth = $(window).width();
// set the height and width of the #snowingScreen div equivalent to that of the window's
$('#snowingScreen').css('height', windowHeight);
$('#snowingScreen').css('width', windowWidth);
// this function is to generate snow randomly scattered around screen
function generateSnow() {
// generate snow using a for loop
for(i=0; i<4; i++){
// randomize the top position of the snow
var snowTop = Math.floor(Math.random()* (windowHeight/2) );
// randomize the left position of the snow
var snowLeft = Math.floor(Math.random()* (windowWidth - 10) );
// appending the snow to the #snowingScreen
$('body').append(
// generate the div representing the snow and setting properties using various jQuery methods
$('<div />')
.addClass('snow')
.css('top', snowTop)
.css('left', snowLeft)
.css('position','absolute')
.html('*')
.click(function() {
alert('You Clicked');
})
);
}
// repeat the generateSnow() function
}
// this function is to alter the top of each snow, using the handy .each() jQuery method
function snowFalling(){
// move the snow
$('.snow').each(function(key, value){
// check if the snow has reached the bottom of the screen
if( parseInt($(this).css('top')) > windowHeight - 80 ) {
// remove the snow from the HTML DOM structure
$(this).remove();
}
// set up a random speed
var fallingSpeed = Math.floor(Math.random() * 5 + 1);
// set up a random direction for the snow to move
var movingDirection = Math.floor(Math.random()*2);
// get the snow's current top
var currentTop = parseInt($(this).css('top'));
// get the snow's current top
var currentLeft = parseInt($(this).css('left'));
// set the snow's new top
$(this).css('top', currentTop + fallingSpeed );
// check if the snow should move to left or move to right
if( movingDirection === 0){
// set the snow move to right
$(this).css('left', currentLeft + fallingSpeed );
}else {
// set the snow move to left
$(this).css('left', currentLeft + -(fallingSpeed) );
}
});
// repeat the rollIt() function for each 200 microseconds
}
// call the function when the document is loaded completely
window.setInterval(snowFalling, 200);
window.setInterval(generateSnow, 200);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.