afiliados con movimiento alternativa marquee CSS alternative marquee css without html

Demo en Codepen

Al igual que mi anterior widget afiliados con movimiento, realizando algunas modificaciones he logrado el mismo efecto pero horizontalmente. Sigue siendo una alternativa en CSS a la etiqueta marquee, solo he cambiado la orientación.


Contenido


Instalar

Vamos a nuestro panel de administración, Temas Personalizar Opciones avanzadas Agregar CSS y pegamos el siguiente código:


/*!
 * Marquee-X 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-x {
   from {transform: translate3d(0, 0, 0);}
   to {transform: translate3d(-100%, 0, 0);}
}
@keyframes marquee-x {
   from {transform: translate3d(0, 0, 0);}
   to {transform: translate3d(-100%, 0, 0);}
}
@-webkit-keyframes marquee-x-inset {
   from,to {
      transform: translate3d(0, 0, 0);
      padding-left:0%;
   }
   50% {
      transform: translate3d(-100%, 0, 0);
      margin-left:100%;
   }
}
@keyframes marquee-x-inset {
   from,to {
      transform: translate3d(0, 0, 0);
      padding-left:0%;
   }
   50% {
      transform: translate3d(-100%, 0, 0);
      margin-left:100%;
   }
}
.marquee-x {
   overflow: hidden;
   position: relative;
}
.marquee-x-content {
   -webkit-animation-iteration-count: infinite;
           animation-iteration-count: infinite;
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
   display: flex;
   align-items: center;
}
.marquee-x-content:hover {-webkit-animation-play-state: paused;animation-play-state: paused}
.marquee-x-item {
    height: 100%;
}
.marquee-x-image {max-height: 100%;}
.marquee-x-content {padding-left: 100%;}
/*}} Fin del core {{*/

/*! Personalización */
/* Contenedor
-----------------------------------------*/
.marquee-x-content {
   max-height: 260px; /* alto maximo */
}
.marquee-x-item {
   max-width: 300px; /* ancho maximo de elementos */
}
/* Animacion
-----------------------------------------*/
.marquee-x-content {
   -webkit-animation-duration: 20s;
           animation-duration: 20s; /* velocidad */
   -webkit-animation-timing-function: linear;
           animation-timing-function: linear; /* flujo */
   -webkit-animation-name: marquee-x;
           animation-name: marquee-x; /* nombre (marquee-x | marquee-x-inset) */
}

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


<b:widget id='LinkList62' title='Marquee X' 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-x"><div class="marquee-x-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-x-item" expr:href='data:marquee.target'>
      <b:attr cond='data:marquee.target not contains "?in"' name='target' value='_blank'/>
         <img class='marquee-x-image' alt='banner' expr:src='data:marquee.name'/>
      </a>
   </b:includable>
</b:widget>

Guardamos los cambios y ya podrás ver el widget desde la pestaña Diseño. Para que el widget sea visible en el blog debes agregar al menos un banner.


Personalizar

Agregar banners

Para agregar un banner edita el nuevo widget "Marquee X". 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

Si deseas que el enlace se ejecute en la misma pestaña, agrega el parámetro ?in al final de la url, por ejemplo:


https://example.com/?in

Si no agregas el parámetro, el enlace abrirá en una nueva pestaña


Cambiar animación

Por defecto la animación desplaza los banners de izquierda a derecha hasta desaparecer del contenedor. Si deseas utilizar la animación alternativa busca el siguiente código:


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

Y cambia marquee-x por marquee-x-inset. La animación alternativa desplaza los banners hasta alcanzar los límites del contenedor.


Conclusión

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