Snowflakes Design

IamLLIIME
Trailblazer
179 1 42

Good day! I just added a snowflakes design on my website that I saw on google. It works pretty fine on the other page but on my homepage the snowflakes can't reach the bottom. It might need some code customization but I don't know how. Can someone help me please.. Thank you!

 

Here's my website: https://faxcable.com.ph/

Replies 12 (12)
prayag_arham
Tourist
8 0 3

Hi @IamLLIIME ,

Please add this code in "theme.scss" 

.flake {

     z-index: 9999999;

}

IamLLIIME
Trailblazer
179 1 42

@prayag_arham  Hi there! I already add the code still it cant reach the very bottom part

 

https://faxcable.com.ph/

prayag_arham
Tourist
8 0 3

@IamLLIIME 

Which js did you use for this ?

IamLLIIME
Trailblazer
179 1 42

This was the only code that I used, I added it on snippets @prayag_arham 

 

<script>
(function($){
$.fn.snow = function(options){
var $flake = $('<div class="flake" />').css({'position': 'absolute', 'top': '-50px'}),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
flakeChar : "❄", 
minSize : 20,
maxSize : 30,
newOn : 300,
flakeColor : ["#E1D9D1"],
durationMillis: null
},
options = $.extend({}, defaults, options);
 
$flake.html(options.flakeChar);
var interval = setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - defaults.maxSize - 40,
endPositionLeft = startPositionLeft - 100 + Math.random() * 200,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake
.clone()
.appendTo('body')
.css(
{
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor[Math.floor((Math.random() * options.flakeColor.length))]
}
)
.animate(
{
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},
durationFall,
'linear',
function() {
$(this).remove()
}
);
}, options.newOn);
 
if (options.durationMillis) {
setTimeout(function() {
removeInterval(interval);
}, options.durationMillis);
}
};
 
})(jQuery);
  $(document).ready( function(){
    $.fn.snow();
});
</script>

 

prayag_arham
Tourist
8 0 3

@IamLLIIME 

I think you need to add 

https://codepen.io/Christopherallen/pen/myPzXz

this demo please check this out 

I checked that js. There is a problem in that. 

So try this demo.

prayag_arham
Tourist
8 0 3

@IamLLIIME 

In your site loading problem that's why Snow not go to bottom.

prayag_arham
Tourist
8 0 3

@IamLLIIME 

Update this JS and let me know once updated :- 

 
(function($){
$.fn.snow = function(options){
var $flake = $('<div class="flake" />').css({'position': 'absolute'}),

 

documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
flakeChar : "prayag_arham_0-1636971193130.png",
minSize : 20,
maxSize : 30,
newOn : 300,
flakeColor : ["#E1D9D1"],
durationMillis: null
},
options = $.extend({}, defaults, options);
 
$flake.html(options.flakeChar);
var interval = setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,

 

endPositionTop = documentHeight - defaults.maxSize,

 

endPositionLeft = startPositionLeft - 100 + Math.random() * 200,
durationFall = documentHeight - defaults + Math.random() * 10000;
 
$flake
.clone()
.appendTo('body')
.css(
{
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor[Math.floor((Math.random() * options.flakeColor.length))]
}
)
.animate(
{
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},
durationFall,
'linear',
function() {
$(this).remove()
}
);
}, options.newOn);
 
if (options.durationMillis) {
setTimeout(function() {
removeInterval(interval);
}, options.durationMillis);
}
};
 
})(jQuery);
  $(window).load( function(){
    $.fn.snow();
});
IamLLIIME
Trailblazer
179 1 42

It didn't work.

IamLLIIME
Trailblazer
179 1 42