Gracias Gracias:  3
Resultados 1 al 6 de 6

Tema: Como crear un banner animado/slideshow en html5

  1. #1
    Miembro Nuevo Avatar de cricricri_cristi
    Fecha de ingreso
    Jan 2016
    Ubicación
    Vilanova i la Geltrú
    Mensajes
    27

    Como crear un banner animado/slideshow en html5

    Hola a todos!

    Estoy intentando crear una página web para mi portafolio personal, y me gustaría crear la típicas imágenes que se ven en la home de un sitio con un slideshow y con elementos animados

    Os dejo aquí un ejemplo de lo quiero hacer para que os situéis: http://www.lamardecreatius.com/

    El caso es que nunca he creado ninguna página web con ese tipo de elemento y me gustaría haber si alguien puede ser tan amable de explicarme como se podría hacer o si me puede aportar algún tutorial al respecto que me fuera bien, ya que todos los que he mirado no se asemejan a lo que ando buscando...

    Un saludo!

    Gracias

  2. #2
    Senior Member Avatar de TALENT CRAZY
    Fecha de ingreso
    Oct 2015
    Ubicación
    Madrid
    Mensajes
    326

    Re: Como crear un banner animado/slideshow en html5

    Buenas Cristina, me haría falta saber como estas montando la web, si modificando a pelo el código dentro de Wordpress, o a través de un portal como One.

    En el caso de estar modificando el código, hay herramientas que te permiten crear y modificar una Web de forma visual, podrías optar por probar un Trial del Adobe Dreamweaver CC, con ese empecé yo y es la mar de fácil.

    En cuanto a los Banners, los animados son Gifts, fragmentos de un video, extraes los Frames y los apretujas o resumes en unos 30, montas el Gift y lo enlazas junto al espacio del Banner, en la Home/Index de la Web.

    En cuanto al tamaño te recomiendo que no muy ancho, para que no solo se vea bien en monitores 1080p, sino que en los móviles se vea también completo.

    Otra pijada que a mi me gusta incluir es el efecto de que cuando pasas con el Mouse por encima de un Botón de la Web, este se ponga de un color diferente.

    Incluir espacios donde estén disponibles tus videos de Vimeo o YouTube que con un click al Play se inicien sin abandonar tu Web..

    Pero como digo arriba, cuentame como lo estas haciendo, para pasarte el código de un Index con el espacio del banner creado, o pasarte un tutorial enfocado a tu herramienta con la que modificas la Web.

    Sea como sea no te preocupes, es sencillo.

    Un saludo! #TC :D

  3. #3
    Senior Member Avatar de marc31
    Fecha de ingreso
    Feb 2004
    Ubicación
    Bilbao
    Mensajes
    1,976

    Re: Como crear un banner animado/slideshow en html5

    Por lo que veo en el ejemplo eso no es hacer un banner, es hacer un slideshow.

    Para hacer un banner más o menos sencillo en html5 puedes usar la beta free de Google Web Designer (beta) https://www.google.com/webdesigner/ Te crea el html5, el css y los js correspondientes, y es bastante visual.

    Si lo que quieres es un slideshow para pasar fotografías;
    Tendrás que ver si lo vas a hacer a partir de una plantilla, o un framework o con el programa tal o cual que te lo implemente o que use solo css, o use jquery u otras librerías...

    Por ejemplo
    Slider pasar fotografías pinchando con css
    http://www.oloblogger.com/2012/05/sl...ript-solo.html

    o por ejemplo...
    Los 12 slideshow más usados...
    http://stylishwebdesigner.com/12-mus...and-tutorials/

    o por ejemplo 16+ Free and Premium Responsive Image Slideshows/Galleries
    http://www.html5xcss3.com/2013/06/fr...lideshows.html

    Depende cual elijas, tendrás que ver que lleva y donde tienes que colocar que para que te funcione.
    Si usted escribe "ya boi", por favor, no venga.
    - -
    La realidad es sólo una ilusión muy persistente. Albert Einstein

  4. #4
    Miembro Nuevo Avatar de cricricri_cristi
    Fecha de ingreso
    Jan 2016
    Ubicación
    Vilanova i la Geltrú
    Mensajes
    27

    Re: Como crear un banner animado/slideshow en html5

    Cita Iniciado por TALENT CRAZY Ver mensaje
    Buenas Cristina, me haría falta saber como estas montando la web, si modificando a pelo el código dentro de Wordpress, o a través de un portal como One...
    Buenos días!

    Remitiéndome a tu mensaje, estoy usando Dreamweaver. No se si es la mejor opción pero de momento es lo que tengo más a mano.

    Gracias a los dos!

    Un saludo

  5. #5
    Senior Member Avatar de marc31
    Fecha de ingreso
    Feb 2004
    Ubicación
    Bilbao
    Mensajes
    1,976

    Re: Como crear un banner animado/slideshow en html5

    ¿Que versión de dreamweaver? ¿La cc?
    Build a slideshow in Dreamweaver CC (was: slideshow)
    https://forums.adobe.com/thread/1434486?tstart=0

    http://jquery.malsup.com/cycle2/

    http://jquery.malsup.com/cycle2/demo/
    Si usted escribe "ya boi", por favor, no venga.
    - -
    La realidad es sólo una ilusión muy persistente. Albert Einstein

  6. #6
    Miembro Nuevo Avatar de cricricri_cristi
    Fecha de ingreso
    Jan 2016
    Ubicación
    Vilanova i la Geltrú
    Mensajes
    27

    Re: Como crear un banner animado/slideshow en html5

    Cita Iniciado por marc31 Ver mensaje
    ¿Que versión de dreamweaver? ¿La cc?
    Buenos días,

    Sí exacto la CC 2015. Muchas gracias por el aporte :D!! Me mirare los links que me pasaste haber si salgo de mi oscuridad jajaja

    Un saludo!

Temas similares

  1. Blender Cómo crear humo animado con blender
    Por compañero en el foro Partículas y Dinámicas
    Respuestas: 7
    Último mensaje: 26-07-2016, 08:30
  2. wimi5 primera plataforma gratuita para crear videojuegos en html5
    Por kuazar en el foro Esta es mi página...
    Respuestas: 2
    Último mensaje: 28-01-2015, 13:29
  3. Respuestas: 0
    Último mensaje: 18-12-2013, 01:24
  4. Respuestas: 0
    Último mensaje: 03-09-2013, 16:10
  5. Como crear un turn-around sobre objeto animado
    Por rappaniu en el foro Animación y Rigging
    Respuestas: 3
    Último mensaje: 17-09-2012, 17:25

Actualmente estos son sus permisos de publicación en el foro.

  • -No puedes crear nuevos temas al no estar registrado o no haber iniciado sesión en el foro.
  • -No puedes responder temas al no estar registrado o no haber iniciado sesión en el foro.
  • -No puedes subir archivos adjuntos al no estar registrado o no haber iniciado sesión en el foro.
  • -No puedes editar tus mensajes al no estar registrado o no haber iniciado sesión en el foro.
  •