afiliados con movimiento alternativa marquee CSS alternative marquee css without html

Demo en Codepen

Muchos blogs utilizan la etiqueta Marquee para insertar banners con movimiento, sin embargo, esta etiqueta está obsoleta y su uso no se recomienda. Se espera que deje de funcionar, así que he desarrollado una alternativa en CSS a la etiqueta marquee.


Contenido


Instalar

Nos vamos a dirigir a nuestro panel de administración en Blogger, Temas Personalizar Opciones avanzadas Agregar CSS y pegaremos el siguiente código:


/*!
 * Marquee-Y v2.0
 * Copyright 2020 zkreations
 * Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT (github.com/zkreations/plugins/blob/master/LICENSE)
 */
 /*! Core (No modificar) {{*/
@-webkit-keyframes marquee-y {
   from {transform: translate3d(0, 0, 0);}
   to {transform: translate3d(0, -100%, 0);}
}
@keyframes marquee-y {
   from {transform: translate3d(0, 0, 0);}
   to {transform: translate3d(0, -100%, 0);}
}
@-webkit-keyframes marquee-y-inset {
   from,to {
      transform: translate3d(0, calc(0px - var(--marquee-y)), 0);
   }
   50% {
      transform: translate3d(0, calc(-100% + var(--marquee-y)), 0);
   }
}
@keyframes marquee-y-inset {
   from,to {
      transform: translate3d(0, calc(0px - var(--marquee-y)), 0);
   }
   50% {
      transform: translate3d(0, calc(-100% + var(--marquee-y)), 0);
   }
}
.marquee-y {
   --marquee-y: 300px;
   overflow: hidden;
   position: relative;
   height: var(--marquee-y);
}
.marquee-y-content {
   -webkit-animation-iteration-count: infinite;
           animation-iteration-count: infinite;
   width: 100%;
}
.marquee-y-content:hover {-webkit-animation-play-state: paused;animation-play-state: paused}
.marquee-y-item {display: block;}
.marquee-y-image {max-width: 100%}
.marquee-y-content {padding-top: var(--marquee-y);}
/*}} Fin del core {{*/

/*! Personalización */
/* Contenedor
-----------------------------------------*/
.marquee-y {
   --marquee-y: 300px; /* alto */
}
/* Animacion
-----------------------------------------*/
.marquee-y-content {
   -webkit-animation-duration: 10s;
           animation-duration: 10s; /* velocidad */
   -webkit-animation-timing-function: linear;
           animation-timing-function: linear; /* flujo */
   -webkit-animation-name: marquee-y;
           animation-name: marquee-y; /* nombre (marquee-y | marquee-y-inset) */
}

No olvides guardar los cambios. Ahora vuelve a Temas Editar HTML, busca <b:section id='sidebar'> o cualquier etiqueta de sección, justo debajo pega el siguiente código:


<b:widget id='LinkList61' title='Marquee Y' type='LinkList'>
   <b:includable id='main'>
      <b:include expr:name='data:widgets ? "widget-title" : "title"'/>
      <b:include name='content'/>
   </b:includable>
   <b:includable id='title'>
      <b:tag name="h2" class='widget-title'>
         <span class='widget-name'><data:title/></span>
      </b:tag>
   </b:includable>
   <b:includable id='content'>
      <div class='widget-content'>
         <div class="marquee-y"><div class="marquee-y-content">
            <b:loop values='data:links' var='marquee'>
               <b:include name='items'/>
            </b:loop>
         </div></div>
      </div><!-- .widget-content -->
   </b:includable>
   <b:includable id='items'>
      <a class="marquee-y-item" expr:href='data:marquee.target'>
      <b:attr cond='data:marquee.target not contains "?in"' name='target' value='_blank'/>
         <img class='marquee-y-image' alt='banner' expr:src='data:marquee.name'/>
      </a>
   </b:includable>
</b:widget>

Guardamos los cambios y listo, podrás ver el widget desde la pestaña Diseño, pero en el blog no será visible hasta que agregues al menos un banner.


Personalizar

Agregar banners

Para agregar un banner edita el nuevo widget "Marquee Y". En el campo "Nombre del sitio" pega la url del banner, mientras que en "Url del sitio" escribe el enlace hacia el sitio web deseado:


captura afiliados marquee

Por defecto todos los enlaces abrirán en una nueva pestaña, si deseas que el enlace cargue en la misma, agrega el parámetro ?in al final de la url, por ejemplo:


https://example.com/?in

Cambiar animación

Por defecto la animación desplaza los banners hacia arriba hasta desaparecer del contenedor, posterior a esto, la animación se reinicia. Si quieres un efecto distinto busca el siguiente código:


/* Animacion
-----------------------------------------*/
.marquee-y-content {
   -webkit-animation-duration: 10s;
           animation-duration: 10s; /* velocidad */
   -webkit-animation-timing-function: linear;
           animation-timing-function: linear; /* flujo */
   -webkit-animation-name: marquee-y;
           animation-name: marquee-y; /* nombre (marquee-y | marquee-y-inset) */
}

Y cambia marquee-y por marquee-y-inset. La animación alternativa desplaza los banners hasta alcanzar los limites del contenedor.


Conclusión

Cuando una etiqueta está obsoleta es normal que las nuevas versiones de los navegadores la ignoren por completo o eliminen la función de la misma, por eso tener una alternativa resulta de gran ayuda.


Si te ha sido útil este aporte no olvides compartirlo, eso me ayuda mucho. Cualquier duda que tengas déjala en los comentarios, siempre trato de responder todos.