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("http://imagen.jpg"); 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!
Si lo hiciste correctamente este debería ser el resultado de tu efecto PARALLAX.
No hay comentarios.:
Publicar un comentario
Déjame tu comentario o consulta.