The Digital Mike

Como seria Animar una Imagen con HTML y CSS? Hace un tiempo me pidieron crear un banner para promocionar una pagina de juegos digitales varios, y junto al pedido se me envio la imagen a usar. Con esto en mente, comence con edicion de la imagen usando Photoshop, o como alternativa, Photopea para separar el fondo de la imagen, asi como los personajes principales, para asi poder animarlos.

Que imagenes puedo usar

Para comenzar, puedes usar las imagenes que yo mismo use para crear el banner html y css. Aqui debajo dejo las tres imagenes para que las uses, o si deseas puedes elegir cualquier imagen que tengas en mente.

La incorporacion de las imagenes va a ser simple, a cada imagen la incluiremos como fondo de los contenedores, cada uno por independiente. Ademas, como estaremos creando un banner html para paginas web, vamos a encapsularlo en un vinculo, le agregaremos un llamado de accion. Sin mas aqui les dejo en codigo web HTML CSS.

<div class="gamebanner">			
        <a href="#" aria-label="Begin the hunt in game" style="width: inherit; height: inherit;">
        <div class="gamepos gamebackg"></div>
        <div class="gamepos gamemonster"></div>
        <div class="gamepos gamegun"></div>
        <div class="gametext">
            <h1>DOOM Eternal</h1>
            <p>Experience the ultimate combination of speed and power in DOOM Eternal</p>
        </div>
        </a>
    </div>

Como comente al principio, incluiremos las imagenes como fondo de los contenedores. Ademas incluiremos la animacion para animar a los personajes principales. Esto permitira que las criaturas al fondo, la del plano principal y el arma se muevan a un ritmo continuo.

<style>
        .gamebanner{width: 100%; height: 800px; position: relative; overflow: hidden;}
        .gamebanner .gamepos{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
        .gamebanner .gamebackg{background-image: url("images/gamebakg.jpg"); background-position: center center; background-size: cover;filter:blur(1px);}
        .gamebanner .gamemonster{background-image: url("images/gamemonster.png"); background-position: center center; background-size: cover; transform: scale3d(1.1, 1.1, 1.1); animation: scaler 20s ease-out; animation-fill-mode: forwards;animation-iteration-count: infinite;animation-direction: alternate;}
        .gamebanner .gamegun{background-image: url("images/gameguns.png"); background-position: center center; background-size: cover; transform: scale3d(1.3, 1.3, 1.3); animation: scaler 20.2s ease-out; animation-fill-mode: forwards;animation-iteration-count: infinite;animation-direction: alternate;}
        .gamebanner .gametext{position: absolute; top: 90%; left: 50%; transform: translate(-50%,-90%); margin: 0; text-align: center; width: 95%;}
        .gamebanner .gametext h1, .gamebanner .gametext p{color: white; text-shadow: 0 0 5px black; font-weight: 700;}
        .gamebanner .gametext h1{font-size: 5rem;}
        .gamebanner .gametext p{font-size: 2rem;}
        @media screen and (min-width:768px){
            .gamebanner{height: 900px;}
            .gamebanner .gametext{top: 15%; left: 95%; transform: translate(-95%, -15%); width: 40%;}
            .gamebanner .gametext h1{font-size: 5rem;}
            .gamebanner .gametext p{font-size: 2rem;}
        }
        @keyframes scaler {
            100% {
                transform: scale3d(1, 1, 1);
                opacity: 1;
                }
        }
    </style>

Como podran ver, esta es la forma en la que he creado este banner para web html css. En proximos articulos estare creando nuevos tutoriales sobre este tema. Por el momento es todo, espero les haya gustado el tutorial y nos vemos en proximos articulos sobre diseño de banners html css y javascript.

Chao.