Resultados 1 al 6 de 6

Tema: Cómo crear un banner animado/slideshow en html5

  1. #1
    Usuario Senior Avatar de cricricri_cristi
    Fecha de ingreso
    Jan 2016
    Ubicación
    Vilanova i la Geltrú
    Mensajes
    27
    Gracias (Dadas)
    13
    Gracias (Recibidas)
    1

    Como crear un banner animado-slideshow en html5

    Hola a todos. Estoy intentando crear una página web para mí 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 qué os situéis: https://www.lamardecreatius.com/.

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

  2. #2
    Nivel Héroe Avatar de TALENT CRAZY
    Fecha de ingreso
    Oct 2015
    Ubicación
    Madrid
    Mensajes
    332
    Gracias (Dadas)
    52
    Gracias (Recibidas)
    83

    Como crear un banner animado-slideshow en html5

    Buenas Cristina, me haría falta saber cómo 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 C, 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 qué no solo se vea bien en monitores 1080p, sino que en los móviles se vea también completo.

    Otra pijada qué a mí 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, cuéntame 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 qué modificas la Web.

    Sea como sea no te preocupes, es sencillo. Un saludo. #TC.

  3. Gracias cricricri_cristi Agradece este post
  4. #3
    Usuario Legendario Avatar de marc31
    Fecha de ingreso
    Feb 2004
    Ubicación
    Provincia de Gerona
    Mensajes
    2,124
    Gracias (Dadas)
    1413
    Gracias (Recibidas)
    606

    Como crear un banner animado-slideshow en html5

    Por lo que veo en el ejemplo eso no es hacer un banner, es hacer un slide show. 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 slide show 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. https://www.oloblogger.com/2012/05/sl...ript-solo.html.

    O, por ejemplo.

    Los 12 slide show más usados.

    O, por ejemplo, 16+ free and premium responsive image slideshows/galleries.

    Depende cual elijas, tendrás que ver que lleva y dónde 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

  5. Gracias cricricri_cristi Agradece este post
  6. #4
    Usuario Senior Avatar de cricricri_cristi
    Fecha de ingreso
    Jan 2016
    Ubicación
    Vilanova i la Geltrú
    Mensajes
    27
    Gracias (Dadas)
    13
    Gracias (Recibidas)
    1

    Como crear un banner animado-slideshow en html5

    Buenas Cristina, me haría falta saber cómo 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 sé si es la mejor opción, pero de momento es lo que tengo más a mano. Gracias a los dos. Un saludo.

  7. #5
    Usuario Legendario Avatar de marc31
    Fecha de ingreso
    Feb 2004
    Ubicación
    Provincia de Gerona
    Mensajes
    2,124
    Gracias (Dadas)
    1413
    Gracias (Recibidas)
    606

    Como crear un banner animado-slideshow en html5

    ¿Qué versión de Dreamweaver? ¿la cc? Build a slide show in Dreamweaver c (was: slide show).
    https://forums.Adobe.com/thread/1434486? Tstart=0. https://jquery, malsup.com/cycle2/. https://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

  8. Gracias cricricri_cristi Agradece este post
  9. #6
    Usuario Senior Avatar de cricricri_cristi
    Fecha de ingreso
    Jan 2016
    Ubicación
    Vilanova i la Geltrú
    Mensajes
    27
    Gracias (Dadas)
    13
    Gracias (Recibidas)
    1

    Como crear un banner animado-slideshow en html5

    ¿Qué versión de Dreamweaver? ¿la cc?
    Buenos días. Sí exacto la c 2015. Muchas gracias por el aporte. Me mirare los enlaces que me pasaste a ver si salgo de mi oscuridad. 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
    : 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
    : 28-01-2015, 13:29
  3. Respuestas: 0
    : 18-12-2013, 01:24
  4. Respuestas: 0
    : 03-09-2013, 16:10
  5. Cómo crear un turn-around sobre objeto animado
    Por rappaniu en el foro Animación y Rigging
    Respuestas: 3
    : 17-09-2012, 17:25