Qué método usar para crear una animación de apertura para una página web

Necesito consejo sobre qué programa usar para crear una animación de apertura para una página web similar a esta: http://melaniedaveid.com/

Estoy más familiarizado con Adobe Illustrator y no estoy familiarizado con la codificación. Me pregunto si crear la animación como un gif en Illustrator sería el camino a seguir. Quiero estar seguro de que no va a ser un problema con la carga de la página web.

¿Qué programa sería mejor para un principiante para ilustrar una animación y qué formato para una página web?

Gracias

De acuerdo con la respuesta de Eli. Verificaría la biblioteca JS maxwellito.github.io/vivus . Esto puede ser difícil si no está familiarizado con la codificación, ¡pero tal vez pueda resolverlo!
Lo que me vino a la mente fue lazylinepainter.info
Si bien el ejemplo no es malo, tenga en cuenta que las 'animaciones de apertura' son bastante anticuadas en el mejor de los casos y molestas en el peor. Úsalos con mucha moderación.
La página vinculada utiliza CSS3 y HTML5 para sus animaciones; se requieren conocimientos técnicos :)
Para crear animaciones HTML sin conocimientos de codificación, recomiendo echar un vistazo a Adobe Edge Animate: creative.adobe.com/en/products/animate
Sin embargo, @PieBie Edge Animate fue el primero, antes de ver la animación de ejemplo. No estoy del todo seguro de que sea fácil usar EA para animar líneas como esa (¿o posible...?), especialmente si no está todo dibujado dentro de EA. Por otra parte, no lo he usado mucho.
Bueno, he usado mucho EA y estoy bastante seguro de que podría replicar esto en EA usando recorte. PERO en este caso particular, un SVG animado sería la solución más elegante y menos dolorosa.

Respuestas (3)

Con illustrator puedes dibujar las líneas y luego exportar el código svg a tu sitio web

Para hacer un efecto como este:

http://codepen.io/chriscoyier/pen/bGyoz

Puede obtener más información sobre la animación svg aquí https://css-tricks.com/svg-line-animation-works/

Hay básicamente tres cosas que puedes hacer, dependiendo de tus habilidades y de lo que quieras.

  1. Haga un video y configúrelo para que se reproduzca automáticamente y oculte la interfaz del reproductor de video. Dependiendo de cuán compleja sea la animación, esta podría ser la solución más simple, pero resultará en la peor calidad con el tamaño de archivo más grande.
  2. Haz animaciones SVG (como las recomendadas por Eli). Esto requiere un poco de codificación, pero es posible que pueda realizar mucho trabajo en Illustrator. Además, esto no servirá para animaciones muy complejas.
  3. Use el elemento canvas y tal vez un marco de gráficos vectoriales como paper.js. Esto requerirá probablemente la mayor cantidad de programación, pero en mi opinión es la forma más elegante (no habrá grandes cantidades de información de imagen en su código HTML como con la forma SVG) y le brindará la mejor calidad. Esto también le ofrece posibilidades casi infinitas porque puede hacer todo tipo de cosas diferentes, como rastrear el cursor y hacer que la animación reaccione ante él.

Eche un vistazo a https://www.chromeexperiments.com : básicamente, todos se basan en el elemento de lienzo y le dan una idea de lo que se puede hacer con él.

Me temo que si no puede programar en absoluto y no quiere aprenderlo y no tiene a nadie más que pueda hacerlo, esta no será una solución adecuada. Es solo: no puedes ir muy lejos en la web si quieres cosas personalizadas como animación y demás sin codificación.

La gente está publicando algunos buenos recursos en las otras respuestas. Voy a resumir sus opciones.

Formatos de salida:

SVG Se puede animar dentro del código con Javascript.

Canvas También se necesita una sólida comprensión de Javascript.

Gif animado Es un formato que encaja bien con tu ejemplo. Es un formato resucitado que funciona bien en animaciones de diseño plano.

CSS Probablemente usando sprites.

Vídeo Bueno. es un video

Programas

  • Cualquier programa vectorial. Ilustrador, Corel, Inkscape.

  • ¿Un programa de animación, After Effects? (demasiado poder para eso)

  • Destello

  • Vectorian Giotto http://vectorian.com/giotto/

  • Haz un sprite o un enfoque en capas.

  • O la codificación de JavaScript.

Propbaby, la apuesta más segura es usar un gif animado.

Qué método usar para crear una animación de apertura para una página web
RespuestasAquíPolítica de privacidad1y, 0v