10
 
07/02/2021

Parallax o paralaje efecto con CSS y jQuery

Parallax o paralaje efecto con CSS y jQueryUn ejemplo para generar efecto parallax o paralaje en imágenes de fondo de un documento HTML pero de manera diferente con el uso de CSS3 y jQuery.

En el siguiente recurso mostramos de manera sencilla cómo generar un efecto parallax o paralaje en algunas de nuestras imágenes o fotografías que se encuentran en el documento HTML.

Puede visualizar una demostración del efecto parallax con la implementación de CSS3 y jQuery.

Para comprender el código es necesario conocer lo siguiente:

  1. Se requieren conocimientos de CSS
  2. Se requieren conocimientos básicos de JavaScript y jQuery.
  3. El código implementado fue probado con el uso de la versión más reciente de jQuery (jQuery Core - 3.5.x Versions).
  4. Se establece "use strict".

Es necesario hacer una solicitud de la versión más reciente de la biblioteca jQuery.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

El archivo que contiene la función JavaScript puede ser llamado desde el encabezado («HEAD») del documento HTML.

<script src="/demos/scripts/js/__parallax__.js"></script>

o puede llamar la función jQuery desde el cuerpo («BODY») del documento HTML.

<script>
/* Código JavaScript / jQuery => «__parallax__.js» */
$(function(){
var __parallax__ = function(a){
"use strict";
var ob = $(a);
$(window).on("scroll",function(){
var ws = $(this).scrollTop(),
oh = ob.height();
if(ws<oh)
ob.css({"transition-property":"background-position",
"transition-duration":"0.5s",
"background-position":"0 "+(ws*(.5)*(-1))+"px"});
});
}(".bg_parallax");
});
</script>

Es necesario establecer algunos estilos para la demostración de nuestro Recurso Parallax.

<style>
*{
box-sizing:border-box;
}
.bg_strip_header{
margin:0;
padding:10px 20px;
border-bottom:10px solid #fcec6a;
background:linear-gradient(135deg,#EE0F30,#1C1C1E,#0D0D0E);
color:#fff;
}
/* Necesario para efecto parallax */
.bg_parallax{
display:block;
width:100%;
height:600px;
background-image:url("/demos/images/image_hill.jpeg");
background-size:150% 150%;
background-position:0 0;
object-fit:cover;
opacity:0.9;
filter:alpha(opacity=90);
}
</style>

Por último, diseñamos nuestro componente o bloque HTML donde debemos agregar nuestra clase «bg_parallax», la cual contiene nuestra imagen y los valores de las propiedades de nuestro estilo predefinido.

<body>
<div style="margin:0;padding:0;height:100%;">
<div style="display:block;position:relative;width:100%;height:auto;margin:0;padding:0;">
<div class="bg_parallax">
<div style="display:block;margin:0;padding:0;position:absolute;top:10%;right:0;width:auto;height:auto;"><div class="bg_strip_header" style="font-size:45px;line-height:38px;opacity:0.9;filter:alpha(opacity=90);">Parallax o paralaje</div><div style="display:block;margin:0;padding:4px 10px;background:#000000;color:#FFFFFF;font-size:22px;text-align:left;opacity:0.7;filter:alpha(opacity=70);">Emulando un parallax o paralaje con CSS y jQuery</div></div>
<div style="display:block;margin:0;padding:0;position:absolute;bottom:10%;left:10px;width:75%;height:auto;"><div style="display:block;margin:auto;padding:4px 10px;width:100%;height:auto;background:#FFFFFF;color:#000000;border:1px solid #fcec6a;font-size:18px;text-align:left;opacity:0.9;filter:alpha(opacity=90);">En esta demostración se puede observar cómo la imagen se mueve vertcalmente al momento de desplazar el scroll de la ventana del navegador.</div></div>
</div>
</div>
</div>
</body>

Espero que este recurso les ayude a seguir ampliando los conocimientos sobre las cosas que se pueden logran a través de las herramientas que nos ofrece CSS y JavaScript / jQuery para los documentos HTML.
Consulta Lo+ Top de Lenguajes De Programación
Todos los titulares en un solo lugar...