Hola a todos, hoy vamos a aprender sobre como hacer un banner con efecto parallax para una pagina de destino.
Aqui les dejo las imagenes que se en este ejemplo, aunque pueden usar cualquier imagen de su interes:
El código HTML para el efecto parallax
El codigo HTML va a estar creado por una imagen que editamos previamente en Adobe Photoshop o en cualquier programa de edicion de imagenes. Cada imagen que exportamos la vamos a llamar por medio de estilo como imagen de fondo y luego le daremos el efecto de movimiento con el codigo javascript.
Lo primero es crear nuestro contenedor con la clase «parallax«:
<div id="parallax">
...
</div>Luego agregaremos las imagenes creadas anteriormente en photoshop y le incluimos la clase ‘posimg‘ para poder controlar el fondo y darle estilo posteriormente:
<div id="parallax">
<div id="citybackimg" class="posimg"></div>
<div id="cityfrontimg" class="posimg"></div>
<div id="bannerproduct" class="posimg"></div>
...
</div>Por ultimo, incluimos el texto de atencion que usaremos para atraer al los usuarios:
<div id="parallax">
<div id="citybackimg" class="posimg"></div>
<div id="cityfrontimg" class="posimg"></div>
<div id="bannerproduct" class="posimg"></div>
<div class="bnr-text" id="lytext">
<div class="imgt"><img src="/images/pcgame01.png" alt="" /></div>
<div class="tlt">
<h1><b>Weekly Deals</b></h1>
<p>Save up to 35% off select produc<br> Free shipping on select items.</p>
<a href="#"><label class="" style="background: #ce2032; border-color:#ce2032; height:44px; color: white; width: 152px; text-align: center; border-radius: 3px; font-size: 16px; padding: 10px 15px;">Shop Now</label></a>
</div>
</div>
</div>El estilo CSS el efecto parallax
Vista Mobil
Para el estilo comenzaremos con crear primero el como se va a visualizar el banner con efecto parallax en dispositivos mobiles. Des esta manera estaremos seguros de tener un banner funcional que podra verse en el telefono sin problemas.
<style>
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');
#parallax{position: relative; margin: 30px 0; width: 100%; height: 600px;overflow: hidden;}
#parallax .posimg{position: absolute; top: 0; left: 0;}
#parallax #cityfrontimg, #parallax #citybackimg{display: none;}
#parallax #bannerproduct{background-image: url('/images/photoparalaxstatic.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; display: block;}
#parallax .bnr-text{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0;font-family: 'Black Ops One', cursive; text-align: center; width: 95%;}
#parallax .bnr-text h1{ font-size: 50px; color: white; text-shadow:0 0 3px black;}
#parallax .bnr-text p{ font-size: 20px; font-weight: 700; font-family: 'Black Ops One', cursive; color: white; text-shadow:0 0 3px black;}
#parallax .bnr-text .imgt img{height: 150px;}
</style>Vista en PC
Para la parte funcional que se vera en PC o tabletas vamos a agregar una estilo que funcionara desde 768 pixeles y mas usando «@media«, y asi lograremos este resultado.
<style>
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');
#parallax{position: relative; margin: 30px 0; width: 100%; height: 600px;overflow: hidden;}
#parallax .posimg{position: absolute; top: 0; left: 0;}
#parallax #cityfrontimg, #parallax #citybackimg{display: none;}
#parallax #bannerproduct{background-image: url('/images/photoparalaxstatic.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; display: block;}
#parallax .bnr-text{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0;font-family: 'Black Ops One', cursive; text-align: center; width: 95%;}
#parallax .bnr-text h1{ font-size: 50px; color: white; text-shadow:0 0 3px black;}
#parallax .bnr-text p{ font-size: 20px; font-weight: 700; font-family: 'Black Ops One', cursive; color: white; text-shadow:0 0 3px black;}
#parallax .bnr-text .imgt img{height: 150px;}
@media screen and (min-width:768px){
#parallax #citybackimg{background-image: url('/images/backcity.png'); background-position: center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; transform:scale(1.1,1.1); display: block;}
#parallax #cityfrontimg{background-image: url('/images/frontcity.png'); background-position: center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%;display: block;}
#parallax #bannerproduct{display: none;}
#parallax .bnr-text{top:50%; left: 20%; transform: translate(-20%,-50%); text-align: left; width: 50%;}
#parallax .bnr-text h1{font-size: 60px;}
#parallax .bnr-text .imgt{float: left; width:40%;height: 300px;}
#parallax .bnr-text .imgt img{height: 300px;}
#parallax .bnr-text .tlt{float: left; width: 60%}
}
</style>El script para el parallax
<script type="text/javascript">
(function() {
var elem = document.querySelector("#parallax"),
frontimg = document.querySelector('#cityfrontimg'),
bnrtext = document.querySelector('#lytext');
elem.addEventListener("mousemove", parallax);
function parallax(e) {
let _w = e.clientX - window.innerWidth/2;
let _h = e.clientY - window.innerHeight/2;
if(window.innerWidth >= 768){
frontimg.style.transform = 'translateX(-' + (0 + _w/2000) + '%) translateY(-' + (0 + _h/2000) + '%)';
bnrtext.style.transform = 'translate(-' + (20 + _w/100) + '%,-' + (50 + _h/100) + '%)';
}else{
bnrtext.style.transform = 'translate(-50%,-50%)';
}
}
})();
</script>
