Como crear un encabezado con parallax

banner parallax en escritorio

Hola a todos, hoy vamos a aprender sobre como crear un encabezado con 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 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

Vista Mobil

Para el estilo comenzaremos con crear primero el como se va a visualizar el banner en dispositivos mobiles. Des esta manera estaremos seguros de tener un banner funcional que podra verse en el telefono sin problemas.

vista de banner multimedia para mobile
Resultado final para dispositivos mobiles
<style>
        /*			font*/
                    @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.

banner encabezado con parallax en escritorio
<style>
        /*			font*/
                    @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() {
                        // Add event listener    			
                        var elem = document.querySelector("#parallax"),
                              frontimg = document.querySelector('#cityfrontimg'),
                              bnrtext = document.querySelector('#lytext');
                        elem.addEventListener("mousemove", parallax);
                        // Magic happens here
                        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>