Эффект дождя на веб-странице?

Я пытаюсь сделать эффект дождя для своего веб-сайта, но я не могу (я пробовал loooooot js-кода, но никто, кажется, не работает ... но на демо-страницах они отлично работают ... последние один я пытаюсь в этой странице:Эффект дождя на веб-странице?

http://redeando.blogspot.com/2013/02/lluvia-en-tu-blog.html

и код:

<div class="lluvia"></div><style> 
.gotas { 
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;top:0px;z-index:99999; 
-webkit-animation: fall .63s linear infinite; 
-moz-animation: fall .63s linear infinite; 
} 
@-webkit-keyframes fall { 
to {margin-top:900px;} 
} 
@-moz-keyframes fall { 
to {margin-top:900px;} 
} 
</style><script type="text/javascript"> 

(function() { 

var nbDrop = 200; 

function randRange(minNum, maxNum) { 
    return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum); 
} 

function createRain() { 

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

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

} 

createRain(); 

})(); 

</script>

может кто-нибудь помочь мне добиться эффекта дождя ?? помогает мне с этим кодом, или если вы знать другой путь

pr oblem is: когда я помещаю код, он кажется сбитым или что-то ... см. изображение ...!

enter image description here

все капли конденсируются или сплющенные в нижней части страницы ...

источник

2014-01-25 DeadlyCrow

кода вы показали «работают» в [это] скрипке (HTTP: // jsfiddle.net/F8b5Z/) (в любом случае, в Chrome). Если эффект просто не соответствует вашему вкусу, возможно, вы немного поняли, что хотите? – nnnnnn

Tss tss ... Вы не должны посещать парней SkidRow. Это ЗЛО: D. Этот код не кажется очень надежным. Например, он не будет работать на IE11. Поскольку все на испанском языке, я передам это. –

Вы проверили свою страницу на веб-сайте разработчика? – ankur140290

<html> 
<canvas id="c"></canvas> 

<h1>Content</h1> 

<p>Hello!!!</p> 
</html> 






<style> 
body, html { 
    margin: 0px; 
    padding: 0px; 
} 

canvas { 
    z-index: 999; 
    margin: 0px; 
    padding: 0px; 
    background-color: transparent; 
    position: absolute; 
} 

h1, p { 
    text-align: center; 
} 
</style> 






<script> 
var rainNum = 100; 

var canvas = document.getElementById('c'); 
var ctx = canvas.getContext('2d'); 

var w = window.innerWidth/1.1; var h = window.innerHeight/1.1; 
var x = 100; var y = 100; 

var rain = []; 
for(i = 0; i < rainNum; i++) { 
    rain.push(new newRain); 
} 

function newRain() { 
    this.x = Math.random() * w; 
    this.y = Math.random() * h; 
} 

var draw = function() { 
    c.width = w; 
    c.height = h; 

    for(t = 0; t < rain.length; t++) { 
    var r = rain[t]; 

    ctx.beginPath(); 
    ctx.fillStyle = 'black'; 
    ctx.fillRect(r.x, r.y, 2, 20); 

    r.y++; 

    if(r.y > h + 20) { 
     r.y = -20; 
    } 
    } 
}; 

setInterval(draw, 3); 
</script>

источник

2014-07-27 20:36:59 Alex

Эффект дождя на веб-странице?

ответ

Смежные вопросы