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 and then one of the following -
<script src="https://www.classcreator.com/000/7/7/0/13077/userfiles/file/snow/snow-and-more.js"></script>
Do not type the word animate.: For example: MakeSnow("snow",1);
animate is 0 if you do not want animation and animate is 1 if you do want animation (Do not type animate)
<script>window.onload= MakeSnow("snow",animate);</script>
<script>window.onload= MakeSnow("snowalt",animate);</script>
<script>window.onload= MakeSnow("leaf",animate);</script>
<script>window.onload= MakeSnow("ornament",animate);</script>
<script>window.onload= MakeSnow("balloon",animate);</script>
<script>window.onload= MakeSnow("firework");</script>
<script>window.onload= MakeSnow("valentine",animate);</script>
<script>window.onload= MakeSnow("saintpatrick",animate);</script>
<script>window.onload= MakeSnow("halloween",animate);</script>
Falling Snow, Leaves, Ornaments, Text and any other image you want to fall down on a 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 are optional 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 one below is just for demonstration to show how you can combine various elements.
There are four predefined 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
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.
Examples of using a predefined display. The next script src= is always required for all the examples.
<script src="https://www.classcreator.com/000/7/7/0/13077/userfiles/file/snow/snow-and-more.js"></script>
animate is 0 if you do not want animation and animate is 1 if you do want animation (Do not type animate)
<script>window.onload= MakeSnow("snow",animate);</script> // generates snow
<script>window.onload= MakeSnow("snowalt",animate);</script> // generates snow alternative images
<script>window.onload= MakeSnow("snow*");</script> // generates character snow
<script>window.onload= MakeSnow("leaf",animate);</script> // generates leaves
<script>window.onload= MakeSnow("ornament",animate);</script> // generates ornaments
<script>window.onload= MakeSnow("balloon",animate);</script> // generates balloons
<script>window.onload= MakeSnow("firework",animate);</script> // generates fireworks
<script>window.onload= MakeSnow("valentine",animate);</script> // generates valentine
<script>window.onload= MakeSnow("saintpatrick",animate);</script> // generates saintpatricks
<script>window.onload= MakeSnow("halloween",animate);</script> // generates halloween
CODE used to generate the display on this page
<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).