Skip to Content
/****************************************** * Snow Effect Script- By Altan d.o.o. (snow@altan.hr, http://www.altan.hr/snow/index.html) * Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code * Modified Dec 31st, 02′ by DD. This notice must stay intact for use ******************************************/     //Configure below to change URL path to the snow image   var snowsrc=”https://weblogs.sdn.sap.com/weblogs/images/1918/snow3.gif”   // Configure below to change number of snow to render   var no = 10;    var ns4up = (document.layers) ? 1 : 0;  // browser sniffer   var ie4up = (document.all) ? 1 : 0;   var ns6up = (document.getElementById&&!document.all) ? 1 : 0;    var dx, xp, yp;    // coordinate and position variables   var am, stx, sty;  // amplitude and step variables   var i, doc_width = 800, doc_height = 600;    if (ns4up||ns6up) {     doc_width = self.innerWidth;     doc_height = self.innerHeight;   } else if (ie4up) {     doc_width = document.body.clientWidth;     doc_height = document.body.clientHeight;   }    dx = new Array();   xp = new Array();   yp = new Array();   am = new Array();   stx = new Array();   sty = new Array();    for (i = 0; i<no; ++ i) {   dx[i] = 0; // set coordinate variables  xp[i] = Math.random()*(doc_width-50); // set position variables  yp[i] = Math.random()*doc_height;  am[i] = Math.random()*20; // set amplitude variables  stx[i] = 0.02 + Math.random()/10; // set step variables  sty[i] = 0.7 + Math.random(); // set step variables  if (ns4up) { // set layers  if (i == 0) {  document.write(“[Dynamic Drive | http://www.dynamicdrive.com/]. Although I find many of the examples really useful, I think it is even better if you can take these examples and adapt them to the BSP Extension framework. By turning them into BSP custom elements, you make the reuse of the code so much simpler. The consumers of these BSP Elements don’t have to even know any JavaScript to put their power to use.    With that we come to my first example. Not only do I hope to share some of the more interesting JavaScripts I have found; but I will include the steps necessary to turn them into Custom BSP Elements. Hopefully people can use these examples, to convert their own favorite JavaScripts into Custom BSP Elements.    *The JavaScript Example*   In the spirit of the holidays, I thought that I might start with an easy to use yet festive example.  With a little luck, you should see some snow flakes fall down this weblog page.  This is an example of the JavaScript we are going to play with today.  The original source is available from Dyanamic Drive  (http://www.dynamicdrive.com/dynamicindex3/snow.htm).  I actually had hoped to post this weblog before I left for my Christmas Vacation.  However an actual snow storm changed those plans.      *The Snowflake Image*  First we need an image file of a snow flake that our JavaScript will animate. The following is the image that I used.  Download Image from Here: image   *The BSP Extension*  Before we can create a new custom BSP element, we need to have a BSP Extension. Think of the Extension as the library that holds all of the related elements. At our company we created one new Extension to hold all of our custom elements. We named this extension ZKEG. The only really important part to creating the Extension is making sure that you specify a BSP Element Basis Class. This is the class that all of your BSP elements will inherit from. By supplying the class CL_HTMLB_ELEMENT, you receive many helpful attributes and methods. The following is a screen shot of what my BSP Extension looks like:  image
To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. Mark Finnern
    Hi Tom,

    I can’t believe that it is actually snowing in this post.

    What will you do if people call this in the summertime? Give out gloves and a scarf? 🙂

    Always a surprise up his sleeve.

    Excellent, Mark.
    P.S. Can you make them not disappear, but collect at the bottom until the whole post is filled and one has to wipe with the cursor to see the underlying code?

    (0) 
    1. Thomas Jung
      That would be neat.  You mention having too much snow to be able to read the underlying code.  That was quite literally the case as I was trying to write this weblog.  Where I live in the US, we received nearly a meter of snow in a 24 hour period.  I had to spend the day shoveling out my drive way instead of finishing this weblog.
      (0) 
  2. Anonymous
    This is a good example Thomas. Well done!

    There is a small wrinkle when you try and pass a different image via the snowImage attribute. It’s easier for you to try it and see rather than me explain the correction.

    (0) 
    1. Thomas Jung

      Perhaps a hint as to what you are having a problem with?  The only thing that I can see is that you have put the path to the image in quotes.  It would probably be better if the coding of the tag itself inserted them.<br/><br/>    <ZKEG:snow numSnowFlakes = “15”<br/>               snowImage     = “‘../zes_keg_shared/Kimball.GIF'” />

      (0) 

Leave a Reply