Multiple .snowfall()
Opened this issue · 5 comments
Having multiple snowfalls doesn't work, I'm guessing this is because of duplicate ID's on the flakes is there a work around? or fix?
For what I need I have figured a dirty fix for the time being.. as I want .snowfall() to be on different div's which aren't on the screen at the same time this bit of code works for me
// Snow Fall
var outside = jQuery('.scene3 .outside');
jQuery(function () {
outside.data('switch', 'on');
});
jQuery(window).scroll(function () {
if (jQuery(document).scrollTop() > 12500) {
if (jQuery(outside).data('switch') == 'on') {
jQuery(outside).data('switch', 'off');
//Clear Scene1
jQuery('.scene1').snowfall('clear');
//Start Scene3
jQuery(outside).snowfall({
image :'/wp-content/themes/christmas/images/snow.png',
flakeIndex: 28,
minSize: 11,
flakeCount: 10,
maxSize:15
});
}
} else {
if (jQuery(outside).data('switch') == 'off') {
jQuery(outside).data('switch', 'on');
//Clear Scene3
jQuery(outside).snowfall('clear');
//Start Scene1
jQuery('.scene1').snowfall({
image :'/wp-content/themes/christmas/images/snow.png',
flakeIndex: 28,
minSize: 11,
maxSize:15
});
}
}
});
I recently made a pull request to address this problem.
It does so by moving the flakes array to a global scope (within the plugin). Then, during creation and garbage collection, I carefully remove and fill in the associated flake ids from the global flakes array sorted by the id number.
This allows every snowflake to have a unique id so that the animation code works correctly and should also fill in old ids of erased flakes rather than continuing to create bigger and bigger id numbers.
The pull request is #28 but I have not yet ported the jQuery code to the 'stock javascript' version.