Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

FREE ADDON: Let It Snow (in the background) Rate Topic   - - - - -

 
  • Chef_Joe
  • Senior Member
  • Members
  • Join Date: 13-Jun 10
  • 178 posts

Posted 12 December 2012 - 01:37 AM #21

Hi

what version are you using?

Fotis

2.2.4

 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1448 posts

Posted 12 December 2012 - 05:28 AM #22

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

Fotis
Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • Chef_Joe
  • Senior Member
  • Members
  • Join Date: 13-Jun 10
  • 178 posts

Posted 13 December 2012 - 03:57 AM #23

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

Fotis

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

 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1448 posts

Posted 13 December 2012 - 11:39 AM #24

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
Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • Chef_Joe
  • Senior Member
  • Members
  • Join Date: 13-Jun 10
  • 178 posts

Posted 13 December 2012 - 07:10 PM #25

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)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>








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!





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



Its using the same script as the V3

Try it out if you have any jquery problems


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

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
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1448 posts

Posted 13 December 2012 - 07:18 PM #26

Hi

in an earlier post (for v3 but now its also for v2 as it uses the same script) I had this

Try to open the file snow.js in /addons/let_it_snow/js

In this section, you can tweek following values
this.vMaxX = 5; // Maximum X velocity range for snow
this.vMaxY = 4; // Maximum Y velocity range for snow

at the very bottom .

// --- common properties ---
this.autoStart = true; // Whether the snow should start automatically or not.
this.flakesMax = 250; // Limit total amount of snow made (falling + sticking)
this.flakesMaxActive = 104; // Limit amount of snow falling at once (less = lower CPU use)
this.animationInterval = 33; // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
this.excludeMobile = true; // Snow is likely to be bad news for mobile phones' CPUs (and batteries.) By default, be nice.
this.flakeBottom = null; // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
this.followMouse = true; // Snow movement can respond to the user's mouse
this.snowColor = '; // Don't eat (or use?) yellow snow.
this.snowCharacter = '&bull;'; // &bull; = bullet, &middot; is square on some systems etc.
this.snowStick = true; // Whether or not snow should "stick" at the bottom. When off, will never collect.
this.targetElement = null; // element which snow will be appended to (null = document.body) - can be an element ID eg. 'myDiv', or a DOM node reference
this.useMeltEffect = true; // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
this.useTwinkleEffect = false; // Allow snow to randomly "flicker" in and out of view while falling
this.usePositionFixed = false; // true = snow does not shift vertically when scrolling. May increase CPU load, disabled by default - if enabled, used only where supported
// --- less-used bits ---
this.freezeOnBlur = true; // Only snow when the window is in focus (foreground.) Saves CPU.
this.flakeLeftOffset = 0; // Left margin/gutter space on edge of container (eg. browser window.) Bump up these values if seeing horizontal scrollbars.
this.flakeRightOffset = 0; // Right margin/gutter space on edge of container
this.flakeWidth = 26; // Max pixel width reserved for snow element
this.flakeHeight = 26; // Max pixel height reserved for snow element
this.vMaxX = 5; // Maximum X velocity range for snow
this.vMaxY = 4; // Maximum Y velocity range for snow
this.zIndex = 0; // CSS stacking order applied to each snowflake
// --- End of user section ---


Fotis
Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1448 posts

Posted 25 November 2013 - 06:18 AM #27

Dont Forget, its never too early for Xmas!

Soon Let it snow for v4.0.x

Fotis
Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1448 posts

Posted 06 December 2013 - 09:25 PM #28

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
Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • cool999
  • Senior Member
  • Trial users
  • Join Date: 26-Jul 12
  • 269 posts

Posted 23 December 2013 - 08:21 AM #29

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

 
  • cool999
  • Senior Member
  • Trial users
  • Join Date: 26-Jul 12
  • 269 posts

Posted 23 December 2013 - 02:24 PM #30

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
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1448 posts

Posted 24 December 2013 - 10:48 PM #31

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
Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • meetshamee
  • Advanced Member
  • Trial users
  • Join Date: 12-Feb 13
  • 92 posts

Posted 26 December 2013 - 03:27 AM #32

Replace your Snow.js
/**
* Instant Snowstorm, rev 2
* (c) Copyright 2012 DWUser.com. All rights reserved.
* by Nathan Rohler
* Released under MIT License
*/
(function() {
// Only supported in IE8+
if ($.browser.msie && parseInt($.browser.version) < 8) 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 = $('<div>').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);
})();