• Pagina 1 din 1
  • 1
widget-uri
DjBoBo
Postări: 11
Reputație: 0
Mesaj # 1 | 12:55 PM
as vrea sa pun pe pagina in genul widget-ului ninsoarea ceva gen ploaie sau soare nu stiu sa explic foarte bn cv ce sa ii dea interes daca ma puteti ajuta
Raver
Postări: 1227
Reputație: 70
Mesaj # 2 | 1:25 PM
DjBoBo, uite un script cu Iarna aici: http://forum.ucoz.ro/forum/23-2081-1#12646

și un script cu ploaie aici, pe care îl pui înainte de <head>:

Cod


<style>
.drop {
     background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6))  );
     background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
    width:1px;
    height:89px;
    position: absolute;
    bottom:200px;
    -webkit-animation: fall .63s linear infinite;
     -moz-animation: fall .63s linear infinite;

}

/* animate the drops*/
@-webkit-keyframes fall {
    to {margin-top:900px;}
}
@-moz-keyframes fall {
    to {margin-top:900px;}
}
#codepen-footer,#codepen-footer *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#codepen-footer{position:fixed;bottom:0;left:0;width:100%;padding:0 10px;height:30px;color:#eeeeee;background-color:#505050;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #505050), color-stop(100%, #383838));background:-webkit-linear-gradient(#505050,#383838);background:-moz-linear-gradient(#505050,#383838);background:-o-linear-gradient(#505050,#383838);background:linear-gradient(#505050,#383838);border-top:1px solid black;border-bottom:1px solid black;box-shadow:inset 0 1px 0 #6e6e6e,0 2px 2px rgba(0,0,0,0.4);font:12px/30px "Lucida Grande","Lucida Sans Unicode",Tahoma,sans-serif;line-height:30px}#codepen-footer a{color:#a7a7a7;text-decoration:none}#codepen-footer a:hover{color:white}#footer-right{position:absolute;right:5px;top:0}#bs-button{padding:1px 6px 2px 19px;background:url(/images/browserstack.png),-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff4d1), color-stop(100%, #c9b67b));background:url(/images/browserstack.png),-webkit-linear-gradient(#fff4d1,#c9b67b);background:url(/images/browserstack.png),-moz-linear-gradient(#fff4d1,#c9b67b);background:url(/images/browserstack.png),-o-linear-gradient(#fff4d1,#c9b67b);background:url(/images/browserstack.png),linear-gradient(#fff4d1,#c9b67b);background-position:4px center,center center;background-repeat:no-repeat;background-size:12px 12px,cover;border:0;font:11px "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif;border-radius:5px}#bs-button:hover{background:url(/images/browserstack.png),#fff4d1;background-position:4px center,center center;background-repeat:no-repeat;background-size:12px 12px,cover}

     </style>

După <body> trebuie pus acest cod:
<section class="rain"></section>  <script>
(function() {

// number of drops created.
var nbDrop = 288;    

// function to generate a random number range.
function randRange( minNum, maxNum) {
     return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}

// function to generate drops
function createRain() {

    for( i=1;i<nbDrop;i++) {
    var dropLeft = randRange(0,1600);
    var dropTop = randRange(-1000,1400);

    $('.rain').append('<div class="drop" id="drop'+i+'"></div>');
    $('#drop'+i).css('left',dropLeft);
    $('#drop'+i).css('top',dropTop);
    }

}
// Make it rain
createRain();

})();
     </script>


Be the change you want to see in the world. M Gandhi.
DjBoBo
Postări: 11
Reputație: 0
Mesaj # 3 | 2:18 PM
k ms dar cel cu ploaia m-ar interesa daca mi-l poti da te rog

Adăugat (08/04/2013, 12:00 PM)
---------------------------------------------
ms mult l-am gasit smile

Adăugat (08/04/2013, 12:18 PM)
---------------------------------------------
am o mica problema cu scriptul deoarece imi mareste pagina foarte mult in jos desi nu mai este nimik ce pot sa-i fac sa nu mai fie asa ?
Material modificat de DjBoBo - Luni, 08/04/2013, 2:19 PM
Raver
Postări: 1227
Reputație: 70
Mesaj # 4 | 7:29 PM
DjBoBo, înlocuiește position: absolute; cu position:fixed;
Be the change you want to see in the world. M Gandhi.
DjBoBo
Postări: 11
Reputație: 0
Mesaj # 5 | 3:22 PM
gata am rezolvat ms mult
  • Pagina 1 din 1
  • 1
Căutare: