Animaciones de background

[madman_18]

Hola a todos!

Querría saber...¿cómo se hacen animaciones tipo caen burbujas, copos de nieve etc usando HTML5?

Si alguno podría orientarme en esto o si sabe de algún tuto lo agradezco :) :)

[ryugen]

Armaría la animación en un canvas de HTML5. Por ejemplo acá: http://thecodeplayer.com/walkthrough...as-snow-effect . Tienes una animación de nieve cayendo.

Restaría ponerla toda tu web encima de este canvas que debería ocupar toda la ventana visible.

Espero podido haberte orientado. Cualquier otra consulta no dudes en hacerla

[madman_18]

Iniciado por ryugen

Armaría la animación en un canvas de HTML5. Por ejemplo acá: http://thecodeplayer.com/walkthrough...as-snow-effect . Tienes una animación de nieve cayendo.

Restaría ponerla toda tu web encima de este canvas que debería ocupar toda la ventana visible.

Espero podido haberte orientado. Cualquier otra consulta no dudes en hacerla

Pues la verdad que has orientado bastante muchas gracias por el enlace :D

Tan solo otra preguntilla...tendrías por ahí algún tuto del manejo de canvas¿?¿?

[ryugen]

Acá tienes un tutorial para armar animaciones básicas:
https://developer.mozilla.org/en-US/...sic_animations

Si desconoces como utilizar canvas:
https://developer.mozilla.org/en-US/...anvas/Tutorial

En ese recurso hay varios tutoriales, organizados desde lo más básico a cosas más complejas

[madman_18]

Iniciado por ryugen

Acá tienes un tutorial para armar animaciones básicas:
https://developer.mozilla.org/en-US/...sic_animations

Si desconoces como utilizar canvas:
https://developer.mozilla.org/en-US/...anvas/Tutorial

En ese recurso hay varios tutoriales, organizados desde lo más básico a cosas más complejas

Gracias por tu ayuda!
Estoy intentando crearlo pero me surgen dos dudas:

1º) Cómo puedo usar una imagen (en vez de pintar los copos pasando el parámetro rgba)
2º) Cuando al canvas le doy un ancho fijo, se me distorsiona mucho el efecto (no se visualiza bien vamos) ¿Por qué puede ser eso?

[ryugen]

El método para dibujar imágenes es

Código Javascript:

context.drawImage(img, x, y);
 

Donde,
contex: es el contexto de dibujo del canvas

img: es un objeto imagen, que puedes cargarlo directamente:

Código Javascript:

var img = new Image();
  img.onload = function(){
    ctx.drawImage(img,0,0);
  };
  img.src = '/files/4531/backdrop.png';
 

o bien, tomarlo del DOM

Código Javascript:

var img = document.getElementById("imagen");
 

x e y: son las cordenadas de donde colocar la esquina superior izquierda de la imagen

El método tiene otras opciones, para redimensionar la imagen, eso te lo dejo para que lo investigues en https://developer.mozilla.org/en-US/...l/Using_images

En cuanto a lo segundo, cada vez que cambias el tamaño del canvas (resize de width o height) este se blanquea y tienes que redibujarlo.

Hay dos caminos para esto. Por un lado que escribas una función que lo redibuje (o continue la animación). O bien que el canvas tenga tamaño relativo (por ejemplo porcentual) y lo que cambie de tamaño sea el padre (con este metodo evitas el blanqueo).

Ejemplo:

Código HTML:

<div id="canvas-parent">
    <canvas id="canvas"></canvas>
</div>
 

Código CSS:

#canvas {
    width:100%;
    height:100%;
}
 

[madman_18]

Estoy probando lo que sería dibujar sólamente la imagen (no me he metido aún en parámetros ni opciones ni nada)...

Mi código es el siguiente:

Código Javascript:

function draw()
    {
            
            var img = new Image();
            img.onload = function(){
              ctx.drawImage(img,50,0);  
            };
            img.src='imagenes/hoja.png';
}
 

Y luego llamo a la función....pero no dibuja nada :( ¿qué tengo erróneo?

[madman_18]

Vaya no sé si expliqué bien lo que quería hacer ryugen.....el mismo efecto que se pueden ver en los enlaces que me facilitaste, pero lo que quiero lograr es que en vez de crear las burbujas que genera, pasarle una imagen que tengo y que haga exactamente lo mismo pero con dicha imagen.

Y no lo consigo