Why won't the snowflake design reach the bottom of my homepage?

[IamLLIIME]

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/

[prayag_arham]

Hi @IamLLIIME ,

Please add this code in "theme.scss" 

.flake {

     z-index: 9999999;

}

[IamLLIIME]

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

https://faxcable.com.ph/

[prayag_arham]

@IamLLIIME 

Which js did you use for this ?

[IamLLIIME]

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]

@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]

@IamLLIIME 

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

[prayag_arham]

@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 : "",

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]

It didn't work.

[IamLLIIME]

@prayag_arham 

[prayag_arham]

ok i check in that i show the banner image show after full site loading in 1 sec. so that's why it not touch to bottom.

[IamLLIIME]

Is there any way to fix it? @prayag_arham  How can I compressed the banner?

[prayag_arham]

@IamLLIIME 

If you use .jpg image use jpg image compressor you can find it in google or use tiny jpg compressor https://tinyjpg.com/.

and If you use .png image use png image compressor you can find it in google or use tiny png compressor https://tinypng.com/.