Snowing Links

Moderator: HTML-Laie

Antworten
Benutzeravatar
Hape
Administrator
Beiträge: 336
Registriert: Fr 22. Mai 2020, 00:33

Snowing Links

Beitrag von Hape »

Starten Sie die Winterzeit mit diesem einzigartigen Schneeskript und überraschen Sie Ihre Besucher mit dieser charmanten DHTML-Animation. Keine Bilder erforderlich! Das Skript lässt Ihre Links beim Rollover schneien. Einfache Konfiguration von Farben, Anzahl der Schneeflocken, Größe und Geschwindigkeit.

Code: Alles auswählen

<script>
// CREDITS:
// Snowing Links
// By Peter Gehrig
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION STARTS HERE
///////////////////////////////////////////////////////////////////////////

// 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")

// 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 maximal-size of your snowflaxes
var snowmaxsize=22

// Set the minimal-size of your snowflaxes
var snowminsize=8

// Set the width of the snowing-zone (pixels)
var snowboxwidth=100

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////


// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var marginleft
var margintop
var snowingzone=1
var posleft
var postop
var is_snowing=false
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 startsnow() {
        is_snowing=true
        if (ie5 || opera) {
                margintop = postop+15
                marginbottom = document.body.clientHeight
                marginleft = posleft
                marginright = posleft+snowboxwidth
        }
        else if (ns6) {
                margintop = postop+15
                marginbottom = window.innerHeight
                marginleft = posleft
                marginright = posleft+snowboxwidth
        }
        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+"pt"
                snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
                snow[i].sink=sinkspeed*snow[i].size/5
                snow[i].posx=randommaker(snowboxwidth)+marginleft-2*snow[i].size
                if (ie5 || opera) {
                        if (snow[i].posx>=document.body.clientWidth-2*snow[i].size) {
                                snow[i].posx=snow[i].posx-snowboxwidth
                        }
                }
                if (ns6) {
                        if (snow[i].posx>=window.innerWidth-2*snow[i].size) {
                                snow[i].posx=snow[i].posx-snowboxwidth
                        }
                }
                snow[i].posy=randommaker(marginbottom-margintop)+margintop-2*snow[i].size
                snow[i].style.left=snow[i].posx+"px"
                snow[i].style.top=snow[i].posy+"px"
                snow[i].style.visibility="visible";

        }
        movesnow()
}

function stopsnow() {
        is_snowing=false
}

function movesnow() {
        if (is_snowing) {
                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])+"px";
                        snow[i].style.top=snow[i].posy+"px"

                        if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
                                snow[i].posx=randommaker(snowboxwidth)+marginleft-2*snow[i].size
                                if (ie5 || opera) {
                                        if (snow[i].posx>=document.body.clientWidth-2*snow[i].size) {
                                                snow[i].posx=snow[i].posx-snowboxwidth
                                        }
                                }
                                if (ns6) {
                                        if (snow[i].posx>=window.innerWidth-2*snow[i].size) {
                                                snow[i].posx=snow[i].posx-snowboxwidth
                                        }
                                }
                                snow[i].posy=randommaker(marginbottom-margintop)+margintop-2*snow[i].size
                        }
                }
                var timer=setTimeout("movesnow()",50)
        }
        else {
                for (i=0;i<=snowmax;i++) {
                        snow[i].style.visibility="hidden";
                }
        }
}

function getcoordinates(e) {
        if (ie5 || opera) {
                posleft=document.body.scrollLeft+window.event.x;
                postop=document.body.scrollTop+window.event.y;
        }
        if (ns6) {
                posleft=e.pageX
                postop=e.pageY
        }
}

for (i=0;i<=snowmax;i++) {
        document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"px'>"+snowletter+"</span>")
}
if (browserok) {
        document.onmousemove=getcoordinates
}
</script>

<!-- END OF THE SNOWING LINK SCRIPT -->

Code: Alles auswählen

<a href="http://www.google.com" onMouseOver="startsnow()" onMouseOut="stopsnow()">sample link<a>
Hier dazu die Demoseite: Snowing Links

Antworten