Hartjes Effect

Gestart doorBasDev3 reacties59 weergaven

4 berichten · pagina 1 van 1

BasDev

Lid · Topicstarter

Berichten
2.692
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Hey!
Ik verveelde me zonet..
En ik heb maar voor mn website een Valentijns thema gemaakt..
En daarbij is ook gekomen een hartjes-sneeuw-effect biggrin
Demo: Bas Hartjes Effect

Hoe zet ik dit op mijn site?
Als je site nog geen jQuery gebruikt moet je dit toevoegen, dat kan zo:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>


Dan maak je een Javascript bestandje met de volgende inhoud wink
if(!window["bas"]){
    window["bas"] = {};
}
if(!window["bas"]["snow"]){
    window["bas"]["snow"] = {};
    
    bas.snow.windowWidth = 100;
    bas.snow.intervalTimeA = 500;
    bas.snow.intervalTimeB = 200;
    bas.snow.removeTime = 10000;
    bas.snow.snowID = 0;
    bas.snow.text = "&#10084;";
    
    bas.snow.init = function(){
        bas.snow.doAdd();
        window.setInterval("bas.snow.doAdd()",bas.snow.intervalTimeA);
        window.setInterval("bas.snow.doAdd()",bas.snow.intervalTimeB);
    };
    bas.snow.doAdd = function(){
        bas.snow.snowID = parseInt(bas.snow.snowID + 1);
        var item = document.createElement("div");
        item.id = "bas_snow_" + bas.snow.snowID;
        item.innerHTML = bas.snow.text;
        item.style.position = "fixed";
        item.style.left = Math.floor(Math.random()*bas.snow.windowWidth) + "." + Math.floor(Math.random()*9) + "%";
        item.style.top = "0px";
        item.style.color = ((Math.floor(Math.random()*2) >= 1) ? #FF68B6 : #FFFFFF);
        item.style.fontSize = Math.floor(Math.random()*20) + "px";
        document.body.appendChild(item);
        $(#bas_snow_ + bas.snow.snowID).animate({
            top: +=1000,
            left:  + ((Math.floor(Math.random()*2) >= 1) ? - : +) + = + Math.floor(Math.random()*51) + %,
            fontSize: +=30
        },10000, function(){});
        window.setTimeout("bas.snow.doRemove(bas_snow_" + bas.snow.snowID + ")",bas.snow.removeTime);
    };
    bas.snow.doRemove = function(id){
        $(# + id).fadeOut("slow", function(){
            document.body.removeChild(document.getElementById(id));
        });
    };
}
window.onload=function(){bas.snow.init();}


En je hartjes effect doet het biggrinJe moet er wel voor zorgen dat je geen wit achtergrond hebt.. Anders zie je alleen de roze hartjes yummie
- Bas
0
Tom

Lid

Berichten
3.868
Reputatie
0
Punten
0,02
Lid sinds
Laatst gezien
Het is nogal irritant, maar wel leuk gemaakt.
0
Berichten
93.699
Reputatie
0
Punten
1,27
Lid sinds
Laatst gezien
Me PC hangt er half van vast maar het is nice biggrin
0
Berichten
93.699
Reputatie
0
Punten
1,27
Lid sinds
Laatst gezien
Leuk, alleen zie ik [] zulke blokjes emo
0

Jouw reactie

Deel je idee, stel een vraag of help een ander verder.

Editor laden…

Praat mee met de One2xs-community.

Inloggen om te reageren