header 1
header 2
header 3

Falling Snow and More

 

A script to show FALLING objects full screen or just the sides of the screen

ALL the code shown is entered in Editor SOURCE mode.
Click the upper right icon labelled "Source" in the editor. Then enter the code shown.

This script is always required followed by the desired images.

<script src="https://www.classcreator.com/000/7/7/0/13077/userfiles/file/snow/snow-and-more.js"></script>

<script>window.onload= MakeSnow("snow","animate");</script>   // generates snow that is animated
OR
<script>window.onload= MakeSnow("snow","animate both");</script>   // generates snow on sides only


All the general MakeSnow options are

window.onload= MakeSnow(
myImages,                 // predefined or your own array of images
                                    //   --- all of the following are optional ---
animation,                  // 0 or 1 or 'animate' or 'noanimate', plus left, right, or both to show only on the sides; phone to always show on phones
speed,                        // speed:  1 to 10 objects fall down;  -1 to -10 objects rise
imagecount,               // number of images  - over 30 not recommended
imagemaximumsize, // maximum size  - usually around 50
imageminimumsize,  // minimum size  - usually around 20
textcolor,                    // optional text color overrides, not required
textfonts                    // optional font overrides, not required
);

 

Do not type the word option.  For exampe, the next two are the same 
MakeSnow("snow",1);
-or-

MakeSnow("snow","animate");

option is 0  or 'noanimate' if you do not want animation
option is 1 or 'animate  for animation 
(See below for other 
option values)

  <script>window.onload= MakeSnow("snow",option);</script>

  <script>window.onload= MakeSnow("snowalt",option);</script>

  <script>window.onload= MakeSnow("leaf",option);</script>

  <script>window.onload= MakeSnow("ornament",option);</script>

  <script>window.onload= MakeSnow("balloon",option;</script>

  <script>window.onload= MakeSnow("firework",option);</script>

  <script>window.onload= MakeSnow("valentine",option);</script>

  <script>window.onload= MakeSnow("saintpatrick",option);</script>

  <script>window.onload= MakeSnow("halloween",option);</script>

  <script>window.onload= MakeSnow("football",option);</script>

 

Falling Snow, Leaves, Ornaments, Text and any other image you want to fall down on a page

 

These are the predefined Image displays:

"snow"  shows snow images
"snowalt"  shows alternative snow images (more variation)
"snow*" shows character *+. snow
"leaf"    shows falling leaf images
"ornament" shows falling ornaments
"balloon" shows rising balloons
"firework" shows rising fireworks
"valentine" shows falling hearts and lips
"saintpatrick" shows falling hats and shamrocks
"halloween" shows falling bats
"football" shows falling football things

myimages are optional array images or text lines to display - from 1 to as many as desired. - see code at end

You can put multiple choices in Image. For example 

MakeSnow("snow leaf","animate");  // select BOTH snow and leaf images

You can vary the number of elements, the speed, the maximum size, the minimum size, fonts and text colors. However, they are all optional.  See example below that shows them all being used for this page.

Additional Animation Values (the default is a full screen display - except for phones - see phone option)

The display can be limited to just the SIDES of the page in Option and additional options
left - display images on the left side
right- display images on the right side
both- display images on both sides
phone - display on a phone - default is no display on a phone (android or iPhone)

 

Examples Showing Output of a predefined Display. 

 

Script that is always required before one of the following is entered below
<script src="https://www.classcreator.com/000/7/7/0/13077/userfiles/file/snow/snow-and-more.js"></script>

Option below has two formats, only numbers 0 and 1 and characters enclosed in quotes.
The character format has additional choices where to display the images.

animate is 0 if you do not want animation and animate is 1 if you do want animation (Do not type animate)

             -OR-
"animate" same as 1, "noanimate" same as 0

The first example shows the two formats that are identical. First one uses a number, second one text format

<script>window.onload= MakeSnow("snow",1);</script>                  // generates snow
<script>window.onload= MakeSnow("snow","animate");</script>   // generates snow

<script>window.onload= MakeSnow("snowalt",Option);</script>   // generates snow alternative images

<script>window.onload= MakeSnow("snow*",Option);</script>      // generates character snow

<script>window.onload= MakeSnow("leaf",Option);</script>           // generates leaves

<script>window.onload= MakeSnow("ornament",Option);</script> // generates ornaments

<script>window.onload= MakeSnow("balloon",Option);</script>    // generates balloons

<script>window.onload= MakeSnow("firework",Option);</script>  // generates fireworks

<script>window.onload= MakeSnow("valentine",Option);</script>  // generates valentine

<script>window.onload= MakeSnow("saintpatrick",Option);</script>  // generates saintpatricks

<script>window.onload= MakeSnow("halloween",Option);</script>  // generates halloween

<script>window.onload= MakeSnow("football",Option);</script>     // generates football

 

CODE used to generate the display on this page 

 

 

The elements on this page are just for a DEMO, but would be too busy for an actual page or not?

Refer to this for color names: http://www.w3schools.com/colors/colors_names.asp

mycolor is an optional list of colors - defaults are shades of white
myfonts is an optional list of fonts. See this for font names: http://www.w3schools.com/cssref/css_websafe_fonts.asp
myimages are optional images or text lines to display - from 1 to as many as desired.

The code below is just for demonstration to show how you can combine various elements.

<script src="https://www.classcreator.com/000/7/7/0/13077/userfiles/file/snow/snow-and-more.js"></script>
<script>
var mycolor=new Array("red","blue","lightyellow","green","AntiqueWhite","GhostWhite","Ivory");   // optional
var myfonts=new Array("Times","Arial","Verdana"); //  optional - these are the defaults

var myImages = new Array(    // optional - uses your own custom text and images
"Happy New Year!*",    // put a * at the end to display the text with each word on top of each other
"Best Wishes**",         // put ** at the end to display the text on one line
"**",
"https://www.classcreator.com/000/7/7/0/13077/userfiles/file/snow/ornament-1.png",
"https://www.classcreator.com/000/7/7/0/13077/userfiles/file/snow/ornament-2.png",
"https://www.classcreator.com/000/7/7/0/13077/userfiles/file/snow/ornament-3.png",
"https://www.classcreator.com/000/7/7/0/13077/userfiles/file/snow/ornament-4.png",
"https://www.classcreator.com/000/7/7/0/13077/userfiles/file/snow/snowflake-1s.png",
"https://www.classcreator.com/000/7/7/0/13077/userfiles/file/snow/snowflake-2s.png",
"https://www.classcreator.com/000/7/7/0/13077/userfiles/file/snow/snowflake-3s.png",
"https://www.classcreator.com/000/7/7/0/13077/userfiles/file/snow/snowflake-4s.png"
);

window.onload= MakeSnow(
myImages, // or you can use one of the predefined display names (see above for names)
//   --- all of the following are optional ---
1,    // 1 = animate images - default for all predefined, make 0 if you do not want animation
2,    // speed:  1 to 10 objects fall down;  -1 to -10 objects rise
15,  // number of images  - over 30 not recommended
50,  // maximum size  - usually around 50
20,  // minimum size  - usually around 20
mycolor,  // optional text color overrides, not required
myfonts // optional font overrides, not required
);
</script>

Display is "responsive". If the screen area changes. Display adapts when the elements reach the bottom (or top).