sábado, 3 de noviembre de 2018

¿Cómo crear efecto Parallax de imágenes para Blogger?

Cómo crear efecto Parallax de imágenes para Blogger?

El efecto Parallax es básicamente que la imagen que se como fondo de pantalla se desplaza más lento que el resto del texto.

Este efecto que es una tendencia de diseño web le da un efecto inusual a tu sitio.

Para lograrlo en Blogger es muy sencillo, solo sigue los siguientes pasos:


  • Sube la imagen que utilizarás a una entrada y publicala para obtener la dirección web o URL de la imagen.
  • Copia y pega el siguiente código en tu página o entrada en función edición html, en la posición en que desees colocar la imagen con el texto superpuesto:



<div class="j-module n j-imageSubtitle js-mod-fullscreenWithText height-300  gradient__walk-the-lime tp-mod-fullscreenWithText" id="cc-m-10920034299" style="animation: fadeIn, 0.8s, 0, ease-in, 1; background-attachment: fixed; background-image: url(&quot;http://imagen.jpg&quot;); background-position: 50% 50%; background-size: cover; box-sizing: border-box; color: #4e5056; font-family: 'Brandon Text', sans-serif; font-size: 18px; height: 300px; line-height: 28.8px; margin: 25px 0px; max-width: 100%; padding: 0px; position: relative; width: 1349px;">
<br />
<figure class="cc-imagewrapper cc-m-image-align-1 cc-m-width-maxed" style="display: table !important; height: auto !important; margin: 0px auto; max-width: 900px; position: relative; width: 900px;"><img alt="imagen" class="" data-src-height="1024" data-src-width="1820" id="cc-m-imagesubtitle-image-10920034299" sizes="(min-width: 700px) 700px, 100vw" src=" http://imagen.jpg " srcset=" http://imagen.jpg 700w, http://imagen.jpg 640w, http://imagen.jpg 320w" style="border: 0px; display: inline; height: 300px !important; left: 0px; max-width: 100%; opacity: 0; top: 0px; vertical-align: top; width: 0px;" /><figcaption style="clear: both; color: white; display: table-cell !important; font-size: 6em; font-weight: 700; left: auto; letter-spacing: 0.02em; line-height: 108px; max-width: 100%; min-width: 0px; padding: 0px 90px; position: relative; text-align: center; top: auto; vertical-align: middle; width: 700px; word-break: break-word; word-wrap: break-word; z-index: 2;">TEXTO</figcaption></figure><br />
<div class="cc-clear" style="clear: both;">
</div>


  • Ahora reemplaza el texto que esta marcado como http:imagen.jpg por la URL o dirección de la imagen que vas a utilizar como fondo.
  • Reemplaza también el el texto que esta marcado como TEXTO por el texto que deberá estar dentro de la imagen.
¡Nos vemos pronto! 


Envíame un mensaje por:  Whatsapp   -   Facebook


Si lo hiciste correctamente este debería ser el resultado de tu efecto PARALLAX. 



Indexación
Parallax

No hay comentarios.:

Publicar un comentario

Déjame tu comentario o consulta.