FREE ADDON: Let It Snow (in the background)

chef_joe · December 12, 2012, 12:00am

[quote name='dvsgr' timestamp='1355268593' post='150943']

Hi

what version are you using?

Fotis

[/quote]

2.2.4

dvsgr · December 12, 2012, 12:00am

OK let me try something for you and I will get back to you.

Fotis

chef_joe · December 13, 2012, 12:00am

[quote name='dvsgr' timestamp='1355290105' post='150960']

OK let me try something for you and I will get back to you.

Fotis

[/quote]

Great, let me know if you figure something out. I'd love to use your addon!

dvsgr · December 13, 2012, 12:00am

Hi again

have a look at the original post, I have added at the end a newer version for 2.2.x

Give it a try and let me know.

Fotis

chef_joe · December 13, 2012, 12:00am

[quote name='dvsgr' timestamp='1352930915' post='149183']

Hi again fellows

a small free addon to get as in the mood. Let it snow, in the background.

Simple and discreet. Just install and thats all. You can if you want, to control the amount of flakes and the speed in lines 13 & 14 in the addons/let_it_snow/hooks/index/scripts.post.tpl (for ver 2.2.x)

If you have problems with the script (any conflicts with other jquery) then just delete the following first lines of the script.(for ver 2.2.x)

```php

```

[attachment=6100:letitnsow.jpg]

[attachment=6103:dsnow3.jpg]

Its 2.2.x and 3.0.x compatible. v 2.2.x shoud also work for older versions. Try it out and let me know.

Who says it's too early for Christmas? It's never too early to make merry and spread peace and goodwill toward your fellow man! Merry Early Christmas!

[attachment=6101:let_it_snow.zip]

[attachment=6102:let_it_snow_v3.zip]

Fotis

PS

Snow will eat up a lot of CPU, even on modern computers, because of the number of elements being moved around the screen at once

By default, mobile phones are excluded from the snow effect to be nice to their CPUs (and batteries), but you can set (in v3 addon ) snowStorm.excludeMobile = false; to enable Snowstorm on devices like the iPhone,

-------------------------------------------------

New Version for 2.2.x - 13/12/2012

[attachment=6240:let-it-snow-2-new.zip]

Its using the same script as the V3

Try it out if you have any jquery problems

---------------------------------------------------

[/quote]

Works great now! Thank you for taking the time to make those changes. One thing I can't seem to alter is the speed of the snow. My version referred me to snow.js instead of scripts.post.tpl.

dvsgr · December 13, 2012, 12:00am

dvsgr · November 25, 2013, 12:00am

Dont Forget, its never too early for Xmas!

Soon Let it snow for v4.0.x

Fotis

dvsgr · December 6, 2013, 12:00am

Just Uploaded the v4.0.x Let it Snow Version in the first Post (at the bottom of the post)

Have fun and Merry Xmas!

Fotis

cool999 · December 23, 2013, 12:00am

The snow size is not increasing using in Cs-cart v3

cool999 · December 23, 2013, 12:00am

I tried increasing size

this.flakeWidth

this.flakeHeight

But the size of the snow didn't increase.Kindly suggest. Using Cs-Cart v3

let_it_snow_v3.zip I downloaded this.

dvsgr · December 24, 2013, 12:00am

Ok

I got a solution for you.

Ttry to increase in line 259 of snow.js

this.fontSize = (10+(this.type/5)*10);

the first values (10). Do that after you have changed the values in line 37 and 38

this.flakeWidth = 20; // Max pixel width reserved for snow element

this.flakeHeight = 20; // Max pixel height reserved for snow element

Try 20 or more and see how it goes.

Fotis

meetshamee · December 26, 2013, 12:00am

Replace your Snow.js

[html]/**

Instant Snowstorm, rev 2
by Nathan Rohler
Released under MIT License

*/

(function() {

// Only supported in IE8+

if ($.browser.msie && parseInt($.browser.version) < return;

// -------------------------------

// — Configuration variables —

// -------------------------------

// How many frames per second? More => smoother but more processor intensive

var fps = 30;

// How often should flakes be added? Every 10 frames by default. Greater => fewer flakes

var addNewFlakesEveryNFrames = 10;

// How many flakes should be added each time? Greater => more flakes, more processor intensive

var newFlakesToAdd = 3;

// Controls the speed; 0.7 provides a nice speed

var speedControl = 0.7;

// -------------------------------

// -------------------------------

// -------------------------------

// Holder variables

var flakes = [];

var additionCounter = 0;

// The flake creator function

function createFlake(curX, curY) {

// How unique should each flake be? These values specify max unique speed and wiggle/drift

var maxSpeedOffset = 2;

var maxWiggleOffset = 10;

// How big should the flakes be?

var minSize = 3;

var maxSize = 10;

// How much drifting/wiggling should be allowed in the downward path?

var minWiggle = 10;

var maxWiggle = 40;

var sizePercent = Math.random();

var size = Math.floor(sizePercent * (maxSize - minSize) + minSize);

var opacity = 0.3 + Math.random() * 0.7;

if ($.browser.msie && parseInt($.browser.version) < 10) //disable transparency on old IE to make rendering easier

opacity = undefined;

var color = ‘#FDFDFD’;

// Create a unique speed offset, so each flake falls at a unique rate

var speedOffset = Math.floor(Math.random() * maxSpeedOffset);

// Create a unique wiggle amount based on size (bigger = more wiggle/drift)

var wiggle = minWiggle + (maxWiggleOffset * Math.random()) + (maxWiggle - minWiggle) * sizePercent;

var flake = $(‘
’).text(’ ').css({

position: ‘fixed’,

left: curX,

top: curY,

zIndex: 0,

width: size,

height: size,

opacity: opacity,

borderRadius: size / 1,

‘-moz-border-radius’: size / 1,

‘-webkit-border-radius’: size / 1,

backgroundColor: color

}).appendTo(‘body’);

var flakeObj = {

size: size,

sizePercent: sizePercent,

homeX: curX,

curX: curX,

curY: curY,

flake: flake,

uniqueSpeedOffset: speedOffset,

wiggle: wiggle,

wiggleCounter: Math.floor(100 * Math.random())

};

flakes.push(flakeObj);

return flakeObj;

}

// Create the sin table to save processing power later

var sinTable = [];

for (var i = 0; i < 100; i++) {

var sin = Math.sin((i / 100) * Math.PI * 2);

sinTable.push(sin);

}

// Track where the mouse is, so we can move flakes away from it

var mouseX = -1000;

var mouseY = -1000;

var $w = $(window);

$(document).mousemove(function(e) {

mouseX = e.pageX - $w.scrollLeft();

mouseY = e.pageY - $w.scrollTop();

});

function onEnterFrame() {

// Update existing flakes

var winH = $w.height();

for (var i = flakes.length - 1; i > -1; i–) {

var flakeObj = flakes[i];

var flake = flakeObj.flake;

var speed = 2 + (1 - flakeObj.sizePercent) * 5 + flakeObj.uniqueSpeedOffset; // bigger = slower to fall

speed *= speedControl; // apply the speed control

var curY = flakeObj.curY;

var newY = curY + speed;

var wiggleCounter = flakeObj.wiggleCounter = (++flakeObj.wiggleCounter % 100);

var sin = sinTable[wiggleCounter];

var wiggle = flakeObj.wiggle * sin;

var newX = flakeObj.homeX + wiggle;

// If we’re close to the mouse, force out of the way

var mouseXDist = Math.abs(mouseX - newX);

var mouseYDist = Math.abs(mouseY - newY);

var influenceArea = 500;

if (mouseXDist < influenceArea && mouseYDist < influenceArea) {

var maxForce = 10;

var dist = Math.sqrt(mouseXDist * mouseXDist + mouseYDist * mouseYDist);

if (dist < influenceArea) {

var influence = maxForce * (1 - (dist / influenceArea));

if (mouseY > newY) {

newY -= influence;

if (mouseX < newX) flakeObj.homeX += influence;

else flakeObj.homeX -= influence;

}

else newY += influence;

}

}

flakeObj.curY = newY;

flakeObj.curX = newX;

flake.css({

top: newY,

left: newX

});

// Destroy flake if it has gone out of view by 100

if (newY > winH + 100) {

flake.remove();

flakeObj.flake = null;

flakes.splice(i, 1);

}

}

// Add any new flakes

if (++additionCounter % addNewFlakesEveryNFrames == 0) {

additionCounter = 0;

var minX = -100;

var maxX = $(window).width() + 100;

var homeY = -100;

for (var i = 0; i < newFlakesToAdd; i++) {

var curX = minX + Math.floor(Math.random() * (maxX - minX));

var curY = homeY + Math.floor(100 * Math.random());

createFlake(curX, curY);

}

}

}

// Start the animation based on the requested frames per second

setInterval(onEnterFrame, 1000 / fps);

})();[/html]