Announcement

Collapse
No announcement yet.

Falling Snow Flakes

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Falling Snow Flakes

    For those that dare. Here is a little script that uses no images (therefor no security issues) and installs in one location, toward the top of your header just below the mega tags. You can customize the size, speed, and color.

    Code:
    <SCRIPT type="text/javascript">
    // Set the number of snowflakes (more than 30 - 40 not recommended)
    var snowmax=35
    
    // Set the colors for the snow. Add as many colors as you like
    var snowcolor=new Array("#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF")
    
    // Set the fonts, that create the snowflakes. Add as many fonts as you like
    var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")
    
    // Set the letter that creates your snowflake (recommended: * )
    var snowletter="*"
    
    // Set the speed of sinking (recommended values range from 0.3 to 2)
    var sinkspeed=0.6
    
    // Set the maximum-size of your snowflakes
    var snowmaxsize=22
    
    // Set the minimal-size of your snowflakes
    var snowminsize=8
    
    // Set the snowing-zone
    // Set 1 for all-over-snowing, set 2 for left-side-snowing 
    // Set 3 for center-snowing, set 4 for right-side-snowing
    var snowingzone=1
    
      /*
       //   * NO CONFIGURATION BELOW HERE *
    */
    
    // Do not edit below this line
    var snow=new Array()
    var marginbottom
    var marginright
    var timer
    var i_snow=0
    var x_mv=new Array();
    var crds=new Array();
    var lftrght=new Array();
    var browserinfos=navigator.userAgent 
    var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
    var ns6=document.getElementById&&!document.all
    var opera=browserinfos.match(/Opera/)  
    var browserok=ie5||ns6||opera
    
    function randommaker(range) {		
    	rand=Math.floor(range*Math.random())
        return rand
    }
    
    function initsnow() {
    	if (ie5 || opera) {
    		marginbottom = document.body.clientHeight
    		marginright = document.body.clientWidth
    	}
    	else if (ns6) {
    		marginbottom = window.innerHeight
    		marginright = window.innerWidth
    	}
    	var snowsizerange=snowmaxsize-snowminsize
    	for (i=0;i<=snowmax;i++) {
    		crds[i] = 0;                      
        	lftrght[i] = Math.random()*15;         
        	x_mv[i] = 0.03 + Math.random()/10;
    		snow[i]=document.getElementById("s"+i)
    		snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
    		snow[i].size=randommaker(snowsizerange)+snowminsize
    		snow[i].style.fontSize=snow[i].size
    		snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
    		snow[i].sink=sinkspeed*snow[i].size/5
    		if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
    		if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
    		if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
    		if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
    		snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
    		snow[i].style.left=snow[i].posx
    		snow[i].style.top=snow[i].posy
    	}
    	movesnow()
    }
    
    function movesnow() {
    	for (i=0;i<=snowmax;i++) {
    		crds[i] += x_mv[i];
    		snow[i].posy+=snow[i].sink
    		snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
    		snow[i].style.top=snow[i].posy
    		
    		if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
    			if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
    			if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
    			if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
    			if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
    			snow[i].posy=0
    		}
    	}
    	var timer=setTimeout("movesnow()",50)
    }
    
    for (i=0;i<=snowmax;i++) {
    	document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
    }
    if (browserok) {
    	window.onload=initsnow
    }
    </SCRIPT>
    Last year I introduced this script on PSs. Wow I have been here almost a year now and still do not feel at home due to the lack of 3dcart support. The PSs platform sure sucked but we users made the best of it and sure had alot of fun. Now I know why many still keep a site or two over there including myself.
    Anyway I have been very busy with our new showroom and training staff for x-mas sales. So If you need help with the install or would like it customized to match your site colors and what not Celebra1 may be able to assist if time allows.

    Hope you like the script. Happy sales.
    And an early Merry Christmas to all.

    ENJOY!
    .
    Clayton
    Go Live Industries

  • #2
    Snowflakes are Cool!

    OK, that's a redundant title! I'm referring to <script> snowflakes. I was rummaging through my huge files of code to find this, when I saw that Go_Live posted it already. I think you'll like the effect and the snowflake colors can be set up to coordinate with your site colors! It is a fun script and versatile. You can use a different snowflake pattern besides the * You can insert a tiny image, use a $ for sales...you are only limited by your imagination! Give the script a try to see if you like the effect. I've been playing around with this to see how it works on this server. But, since there are so many ways store owners have their frame set up, I'm sure there will be questions. Post questions if you have them. As a team I'm sure we can help each other spread a bit of cheer. Thanks Go_Live!

    (aside) Go_Live, I thought you said we should "shoot the turkey" first! Wishing us an early Merry Christmas before T-Day is a bit premature!

    Comment


    • #3
      Go Live, Thank you for the script. a lot of fun.
      I put it in a file (snow.js) and referenced it in the frame <head> section.
      Code:
      <!-- Snow begin -->
      <script language="JavaScript" src="assets/scripts/snow.js" type="text/JavaScript"></script>
      <!-- Snow end -->
      it is cleaner than having all that code in the frame.

      Comment


      • #4
        Originally posted by elightbox View Post
        Go Live, Thank you for the script. a lot of fun.
        I put it in a file (snow.js) and referenced it in the frame <head> section.
        Code:
        <!-- Snow begin -->
        <script language="JavaScript" src="assets/scripts/snow.js" type="text/JavaScript"></script>
        <!-- Snow end -->
        it is cleaner than having all that code in the frame.
        Yes I am aware and that is how I referance most of my scripts. (no need to read all the java for every pageload) (speaking of java I wish 3dcart would give us a list of all the old and unneeded java that they have our sites pointing to).
        I try to keep it simple for others that are not so sure.
        Anyway glad you like the script.

        Celebra1 The shoot the turkey before we hang the bells, balls, whatever was all part of my humor.

        But really as to decorating a site for Christmas, any time after Halloween is just fine.

        Gobble, Gobble
        .
        Clayton
        Go Live Industries

        Comment


        • #5
          File Creation

          Go Live, thanks for sharing the code.
          Can anyone walk me thru creating a snow.js file, as per elightbox's suggestion.

          Thanks in advance.

          Comment


          • #6
            Sure just add the script minus the tags to notepad and change the file extention from .txt to .js

            code to be put in the file
            Code:
            // Set the number of snowflakes (more than 30 - 40 not recommended)
            var snowmax=35
            
            // Set the colors for the snow. Add as many colors as you like
            var snowcolor=new Array("#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF")
            
            // Set the fonts, that create the snowflakes. Add as many fonts as you like
            var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")
            
            // Set the letter that creates your snowflake (recommended: * )
            var snowletter="*"
            
            // Set the speed of sinking (recommended values range from 0.3 to 2)
            var sinkspeed=0.6
            
            // Set the maximum-size of your snowflakes
            var snowmaxsize=22
            
            // Set the minimal-size of your snowflakes
            var snowminsize=8
            
            // Set the snowing-zone
            // Set 1 for all-over-snowing, set 2 for left-side-snowing 
            // Set 3 for center-snowing, set 4 for right-side-snowing
            var snowingzone=1
            
              /*
               //   * NO CONFIGURATION BELOW HERE *
            */
            
            // Do not edit below this line
            var snow=new Array()
            var marginbottom
            var marginright
            var timer
            var i_snow=0
            var x_mv=new Array();
            var crds=new Array();
            var lftrght=new Array();
            var browserinfos=navigator.userAgent 
            var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
            var ns6=document.getElementById&&!document.all
            var opera=browserinfos.match(/Opera/)  
            var browserok=ie5||ns6||opera
            
            function randommaker(range) {		
            	rand=Math.floor(range*Math.random())
                return rand
            }
            
            function initsnow() {
            	if (ie5 || opera) {
            		marginbottom = document.body.clientHeight
            		marginright = document.body.clientWidth
            	}
            	else if (ns6) {
            		marginbottom = window.innerHeight
            		marginright = window.innerWidth
            	}
            	var snowsizerange=snowmaxsize-snowminsize
            	for (i=0;i<=snowmax;i++) {
            		crds[i] = 0;                      
                	lftrght[i] = Math.random()*15;         
                	x_mv[i] = 0.03 + Math.random()/10;
            		snow[i]=document.getElementById("s"+i)
            		snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
            		snow[i].size=randommaker(snowsizerange)+snowminsize
            		snow[i].style.fontSize=snow[i].size
            		snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
            		snow[i].sink=sinkspeed*snow[i].size/5
            		if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
            		if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
            		if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
            		if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
            		snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
            		snow[i].style.left=snow[i].posx
            		snow[i].style.top=snow[i].posy
            	}
            	movesnow()
            }
            
            function movesnow() {
            	for (i=0;i<=snowmax;i++) {
            		crds[i] += x_mv[i];
            		snow[i].posy+=snow[i].sink
            		snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
            		snow[i].style.top=snow[i].posy
            		
            		if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
            			if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
            			if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
            			if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
            			if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
            			snow[i].posy=0
            		}
            	}
            	var timer=setTimeout("movesnow()",50)
            }
            
            for (i=0;i<=snowmax;i++) {
            	document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
            }
            if (browserok) {
            	window.onload=initsnow
            }
            .
            Clayton
            Go Live Industries

            Comment


            • #7
              Thanks Clayton.

              I'm a little new to this, can you tell me exactly where you would add a file?

              ie.....Settings>>>Design>>>????

              Comment


              • #8
                Most use FTP, then again many are not comfortable

                So........

                Top bar
                file manager
                Create folder (scripts)

                upload the file you created (snow.js)

                place this code in your header
                Code:
                <script language="JavaScript" src="assets/images/scripts/snow.js" type="text/JavaScript"></script>
                I like the idea of using

                Code:
                <!-- Snow begin -->
                
                <!-- Snow end -->
                But have been warned that 3dcart uses this format for code blocks.
                And we are not sure of weather this type of tag would cause 3dcart to do a lookup and therefor slow down load time.

                So I leave it out and recognize the code for what it is or use

                Code:
                // snow script
                If your not sure just place the original code as is.

                I hope this is not starting out harder then it is suppose to be.

                How about a little fun with color customizations.
                Anybody care to share there design?
                Last edited by Go Live; 11-14-2011, 12:04 PM.
                .
                Clayton
                Go Live Industries

                Comment


                • #9
                  I added a little gold along with the silver to the flakes
                  "#C3B263","#B9A443","#DBC76D","#E5D796","#E5DFC2", "#F1EEDF"

                  We have a darker background and the gold looks nice with it.

                  Comment

                  Working...
                  X