Snow Effect

**Augustab** · 11-03-2017, 02:41 PM

1) Script Title: Snow Effect - Spesial document effects.

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamicindex3/snow.htm

3) Describe problem:

Hi

Im using this nice code for a christmas calendar im making in my IT-class. The calendar is supposed to have make different effects when you click on the hatches.

My idea was to make the snow effect active when i clicked for example the 3rd hatch. I tried putting all the code into a function that started when i clicked on hatch 3, but that didnt work. Like this:

document.getElementById("hatch3").onclick = startsnoweffect;
function startsnoweffect (evt) {

all of your code in here

}
as i said this didnt work.

Then i tried to put all of your code in the bottom of the the body tag, like you wanted us to do, and then wrap a function around this. Then i referred to this function inside the document...onclick function which is in my other script tag. But when i do this the picture gets totally white, and freezez, with a couple of snowflakes standing still.

What i actually ask you about, is if you know a way to get the snoweffect code to only run when i have clicked on a hatch?

if you want me to send the html/script-file i can do that

**jscheuer1** · 11-04-2017, 01:24 AM

I've written at least a few mods of this and/or similar (falling-rising images) code. It (or a similar sort of effect) can be turned on and off using an event such as click.

As the script you're using is extremely out of date (catering to browsers that no longer exist), I'd recommend switching to one of those mods of mine. The most basic I can find tight now is:

http://jscheuer1.com/demos/tidbits/falling_rising.htm

Use your browser's "view source" to get the code.

The activation code is:

Code:

fall.fall=setInterval('fall()', fall.speed);

If you remove that from the script, it will not start untill a click executes that code. Images may need to be hidden prior to that (it's been a while since I messed with this) but it can be done. To get things to stop once they are falling, execute:

Code:

clearInterval(fall.fall)

That will stop the falling motion, but the images will still be seen - just hanging there. But you can make the visibility hidden or display none. Again, if you need help with that part, just let me know.

First get rid of that outdated code, use the code I've just now provided, do the best you can with it, then if there are problems, link me to the page you're trying to work this out on.

Once you have that setup on your page, if you still need help turning it off and/or on (hiding or showing images, etc.), please post a link to your page where you are trying this.

**Augustab** · 11-06-2017, 07:16 AM

Thanks a lot for a very good answer

I will change to this new file, and then try to do as you said. I'll send a new message if i cant make it.

- August

**Augustab** · 11-06-2017, 08:05 AM

I think i need some more help with how to make the "snowstorm" active only when i click the calendars. I can give you my file if that helps.

I cant find a way to send the file here, so i will just copy/paste the code in here.

HTML:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Julekaldender</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald|Roboto+Condensed" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
    <script type="text/javascript">

        window.onload = oppstart;

        function oppstart() {

            function UrlExists(url, cb){
                jQuery.ajax({
                    url:      url,
                    dataType: 'text',
                    type:     'GET',
                    complete:  function(xhr){
                        if(typeof cb === 'function')
                            cb.apply(this, [xhr.status]);
                    }
                });
            }

            var tl = new TimelineMax;
            var k = 1;
            var datoluke = 1;
            for (var j = 0; j < 4; j++) {
                for (var w = 0; w < 6; w++) {
                    var ny_luke = document.createElement("div");
                    ny_luke.style.height = "70px";
                    ny_luke.style.width = "90px";
                    ny_luke.style.top = String(90 + 130 * j) + "px";
                    ny_luke.style.left = String(260 + 150 * w) + "px";
                    ny_luke.style.borderStyle = "solid";
                    ny_luke.style.borderColor = "red";
                    ny_luke.style.position = "absolute";
                    ny_luke.className = "lukefelles";
                    ny_luke.id = "luke" + k;
                    k++;
                    ny_luke.innerHTML = datoluke;
                    datoluke++;
                    document.getElementById("innpakning").appendChild(ny_luke);

                }
            }
            var d = new Date();
            for (var n = 1; n < 25; n++) {
                localStorage.setItem("luke" + n, "true");
                if (n < d.getDate()) {
                    localStorage.setItem("luke" + n, "false");
                    tl.set("#luke" + n, {borderColor: "black"});
                    tl.set(".lukefelles#luke" + n, {color: "black", boxShadow: "4px 4px 10px #000000", borderWidth: 3});
                }
            }
            var r=1;
            document.getElementById("innpakning").onclick = visbilde;
            function visbilde (evt) {
                var str = evt.target.id;
                var res = str.substring(4);
                var dagerigjen = 24 - res;
                if (JSON.parse(localStorage.getItem(evt.target.id))=== true) {
                   document.getElementById("overskrift").innerHTML = "Det er " + dagerigjen + " dager igjen til jul";
                   document.getElementById("overskrift").style.fontSize= "40px";
                    var pic = evt.target.id + ".jpg";
                    UrlExists(pic, function(status){
                        if(status === 200){
                            document.getElementById("kroppen").style.backgroundImage = "url(" + pic + ")";
                        }
                    });


                   }
                }
        }

    </script>
</head>
<body id="kroppen">

<h1 id="overskrift">Julekalender</h1>

<div id="innpakning">



</div>

</body>
</html>

CSS

Code:

html  {
    margin: 0;
}
body {
    background-image: url("bakgrunn.jpg");
    background-attachment: fixed;
    background-size: cover;
}
body.newbg1 {
    background-image: url("vinter.jpg");
    background-attachment: fixed;
    background-size: cover;
}
body.newbg2 {
    background-image: url("hund.jpg");
    background-attachment: fixed;
    background-size: cover;
}

#innpakning {
    margin-left: 50px;
}
.lukefelles {
    color: red;
    font-size: 30px;
    box-shadow: 4px 4px 10px black;
    border-width: 3px;
}
.lukefelles:hover {
    box-shadow: 7px 7px 30px black;
    border-width: 6px;
}
#overskrift  {
    color: red;
    font-family: 'Roboto Condensed', sans-serif;
    text-align: center;
    font-size: 70px;
    margin-top: 5px;
    margin-bottom: 5px;
}

SetItems

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Set items</title>
    <script>
        window.onload = oppstart;

        function oppstart() {
            var d = new Date();
            for (var n=1;n<25;n++) {
                localStorage.setItem("luke"+n, "true");

                if (n < d.getDate()) {
                    localStorage.setItem("luke"+n, "false")
                }
            }
            alert("web storage er satt opp")
        }

    </script>
</head>
<body>
<p>Programmet er ferdig</p>
</body>
</html>

**jscheuer1** · 11-07-2017, 05:47 AM

OK, that's just as well. I was just looking at the script I found for you, and it's really not going to work out for what you want. I've just updated it so that it can, but it needs some finishing touches and cleaning up. I don't really see where you would use it though. When it's finished it will have easy to use start and stop functions. Where would you put something like that?

**Augustab** · 11-07-2017, 09:58 AM

Thanks againg for the answer.

I want to use it like a "gift" when you click on a hatch. With that i mean that when you click on the hatch the snoweffect will starta and run, and then when you click outside it etc the snow effect will stop again.

We have a task here in the javascript-class/ IT-class in Norway, and the task was to make a christmas calendar that makes things happen when you click on the different hatches.

August

**jscheuer1** · 11-07-2017, 04:29 PM

Well, I don't see the hatches. Maybe I'm missing something.

Anyways, as regulars here should know by now, I'm notorious for updating code, and I'll probably update this code. But at least it seems serviceable for what you need:

Code:

<script>

/*
* Falling/Rising - by John Davenport Scheuer - aka:jscheuer1
* Very freely adapted from - Autumn leaves - by Kurt Grigg (kurt.grigg@virgin.net)
* Visit http://www.dynamicdrive.com for TOS.
* Modified by jscheuer1 in http://www.dynamicdrive.com/forums
* This credit must remain for legal use.
*/
(function(){
 fall.dir=1     // Set 'falling' direction (1 for down, -1 for up).
 fall.speed=50  // 20 to whatever (70 is pretty slow), higher numbers are slower
 fall.amount=16 // Set max number of images to fall at once, the smaller the images, the higher this can be.
 fall.sway=10   // Set amount of left/right swaying of objects (default=10), higher numbers produce more sway.
 fall.limit=0   // Set number of fallings/risings until effect should end, use 0 for no end.

// Pre-load your image(s) below!
if(document.images){ // <-- Do Not Edit or remove this line!!!
fall.grphcs=new Array()
fall.image0=new Image();
fall.image0.src=fall.grphcs[0]="al.gif"
fall.image1=new Image();
fall.image1.src=fall.grphcs[1]="bl.gif"
fall.image2=new Image();
fall.image2.src=fall.grphcs[2]="cl.gif"
fall.image3=new Image();
fall.image3.src=fall.grphcs[3]="dl.gif"
fall.image4=new Image();
fall.image4.src=fall.grphcs[4]="el.gif"
fall.image5=new Image();
fall.image5.src=fall.grphcs[5]="fl.gif"

//////////////// Stop Editing //////////////
}

fall.prepare=function(){
fall.di=document.getElementById;
if (!document.images)
return;
fall.iebod = document.compatMode && document.compatMode.indexOf('CSS')!=-1? function(){return document.documentElement;} : function(){return document.body;}
fall.get=function(id){return document.getElementById(id);};
fall.t1=fall.iebod().scrollWidth;
fall.Ypos=new Array();
fall.Xpos=new Array();
fall.Speed=new Array();
fall.Step=new Array();
fall.Cstep=new Array();

fall.speed=Math.max(20, fall.speed);
fall.set_ims();
}
fall.set_ims=function(){

var img = document.createElement('img'), cimg;
img.style.position = 'fixed';
img.style.top = img.style.left = "-2000px";
for (fall.i = 0; fall.i < fall.amount; fall.i++){
fall.P=Math.floor(Math.random()*fall.grphcs.length);
cimg = img.cloneNode(true);
cimg.id = "si" + fall.i;
cimg.src = fall.grphcs[fall.P];
cimg.addEventListener('load', fall.fall_start, false);
document.body.insertBefore(cimg, document.body.firstChild);
}

fall.WinHeight=function(){return window.innerHeight?window.innerHeight:fall.iebod().clientHeight;};
fall.WinWidth=function(){
if(window.innerWidth&&fall.iebod().clientWidth)
return Math.min(window.innerWidth,fall.iebod().clientWidth);
return window.innerWidth?window.innerWidth:fall.iebod().clientWidth;
}
for (fall.i=0; fall.i < fall.amount; fall.i++){                                                                
 fall.Ypos[fall.i] = Math.round(Math.random()*fall.WinHeight());
 fall.Xpos[fall.i] = Math.round(Math.random()*fall.WinWidth());
 fall.Speed[fall.i]= (Math.random()*5+3)*fall.dir;
 fall.Cstep[fall.i]=0;
 fall.Step[fall.i]=Math.random()*0.1+0.05;
}
}

fall.falls=0;
function fall(){
var fac, cont=0, s='style', d='display', f=fall.dir, w=fall.WinWidth, h=fall.WinHeight;
var hscrll=0;
var wscrll=0;
for (var i=0; i < fall.amount; i++){
var sy = fall.Speed[i]*Math.sin(90*Math.PI/180);
var sx = fall.Speed[i]*Math.cos(fall.Cstep[i]);
fall.Ypos[i]+=sy;
fall.Xpos[i]+=sx*fall.sway*0.1;
fac=fall.get('si'+i).offsetHeight;
if (fall.Ypos[i] > h()&&f>0||fall.Ypos[i] < fac*-1 && f<0){
fall.Xpos[i]=Math.round(Math.random()*w());
fall.Speed[i]=(Math.random()*5+3)*f;
}
if(i==fall.amount-1&&(fall.Ypos[i] > h()&&f>0||fall.Ypos[i] < fac*-1 && f<0))
fall.falls++;
fall.Ypos[i]=(fall.Ypos[i] > h()&&f>0)? fac*-1 : (fall.Ypos[i] < fac*-1 && f<0)? h()+fac : fall.Ypos[i];
if(fall.limit&&fall.falls>fall.limit&&((f>0&&fall.Ypos[i]==fac*-1)||(f<0&&fall.Ypos[i]==h()+fac)))
fall.get('si'+i)[s][d]='none';
fall.df=fall.da&&!fall.di||window.opera&&(typeof opera.version=='undefined'||opera.version()<9)? (f<0?fac*2:fac):0;
fall.get('si'+i)[s].left=fall.df? Math.min(fall.Xpos[i], w()-fall.get('si'+i).offsetWidth)+'px' : fall.Xpos[i]+'px';
fall.get('si'+i)[s].top=fall.Ypos[i]-fall.df+'px';
for (var j = 0; j < fall.amount; j++)
if (fall.get('si'+j)[s][d]!='none')
cont=1;
if(!cont){
clearInterval(fall.fall);
}
fall.Cstep[i]+=fall.Step[i];
}
}
fall.starting=1;
fall.fall_start=function(){
if (fall.started||fall.amount>fall.starting++)
return;
fall.started=true;
fall.fall=setInterval(function(){fall();}, fall.speed);
};
//fall.prepare(); //uncomment this to have effect start immediately
fall.stop = function(){
fall.falls = Math.max(fall.falls, 2);
fall.limit = Math.max(fall.falls - 1, 1);
};
fall.restart = function(){
if(!fall.limit){return;}
clearInterval(fall.fall);
fall.limit = 0;
for (var i=0; i < fall.amount; i++){
fall.get('si'+i).style.display = '';
}
fall.fall=setInterval(function(){fall();}, fall.speed);
}
fall.start = function(){
	if(!fall.started){
		return fall.prepare();
	}
	return fall.restart();
}
window.fall_start = fall.start;
window.fall_stop = fall.stop;
})();
</script>

In it's current form, it can go anywhere on the page or be made external in the usual way. There are only two exposed variables/functions:

fall_start()
fall_stop()

The first starts the effect, the second one stops it. The method of stopping is gradual. Things will continue to fall for a little while, pretty much whatever is "in the air" will continue to fall. Once everything is off the screen it stops. You can restart any time though, you don't have to wait for it to finish. Stopping when it's already stopped, or starting when it's already started does nothing.

Here's a demo with the new code, I've included buttons to start and stop the effect:

http://jscheuer1.com/demos/tidbits/falling_rising-s.htm

Also, don't get this code from email, get it from the post, or the demo page.

**Augustab** · 11-07-2017, 06:21 PM

Thanks! It works now!!

Now the effect starts when i click on f.example hatch 15, and stops when i click on hatch 17. (i havent found a way to make it start and stop when i click the same hatch, because then i would have to have both the start and stop function in that hatch.onclick), but I can ask my teacher about that tomorrow.

I also wondered how i can make the leafs to be snowflakes instead. Is it just to change all the leaf-images-links with a snowflake-img?

August

**jscheuer1** · 11-07-2017, 08:35 PM

Yes, you can use any images you want to. Also, I should be able to make a toggle function (turns on if off, turns off if on), I didn't know that would be useful. I'll let you know in a bit.

**jscheuer1** · 11-07-2017, 08:59 PM

OK, here's the new demo with the toggle feature:

http://jscheuer1.com/demos/tidbits/f..._rising-st.htm

If you can't get the code from the page, let me know and I will post it. The new exposed function is:

fall_toggle()

which will turn it on if it is off and off if it is on.

Something I just thought of - might be nice that if you click on one of the falling images it could activate the stop function - or maybe the toggle one. I had this idea because in testing sometimes the buttons are covered by a floating image.

Thread: Snow Effect

Thread Tools

Search Thread

Snow Effect

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Similar Threads

Snow Effect

Snow Effect

Snow Effect

Snow Effect

Snow Effect

Bookmarks

Bookmarks

Posting Permissions