#1 2017-11-08 18:59:29

jomego
Member
Registered: 2017-11-08
Posts: 13

Crear un slider de texto para poner publicidad

Otro BuilderConsejo.

Muchas veces tenemos la necesidad de poner un pequeño slider de texto, que podemos alimentarlo desde un JSON o un fichero de TEXT que tengamos en nuestro servidor para poder cambiar el mensaje cuando queramos en nuestra aplicación... Con un poco de magia de CSS podemos hacerlo, el ejemplo es para poder manejar 3 lineas pero podemos quitar o poner según nuestra necesidad..

Colocar en la pagina de Estilos:

.item-1, 
.item-2, 
.item-3 {

        display: block;
       	position: absolute;
       	animation-duration: 20s;
        animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

.item-3{
	animation-name: anim-3;
}

@keyframes anim-1 {
	0%, 8.3% { left: -100%; opacity: 0; }
  8.3%,25% { left: 25%; opacity: 1; }
  33.33%, 100% { left: -100%; opacity: 0; }
}

@keyframes anim-2 {
	0%, 33.33% { left: -100%; opacity: 0; }
  41.63%, 58.29% { left: 25%; opacity: 1; }
  66.66%, 100% { left: -100%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 66.66% { left: -100%; opacity: 0; }
  74.96%, 91.62% { left: 25%; opacity: 1; }
  100% { left: -100%; opacity: 0; }
}

Después colocamos un objeto HTML en nuestra App y dentro del HTML le colocamos el siguiente codigo:

<p class="item-1">[LINEA1]</p>

<p class="item-2">[LINEA2]</p>

<p class="item-3">[LINEA3]</p>

Espero que os sea de utilidad este BuilderConsejo. ;-)

Offline

Board footer

Powered by FluxBB


Copyright ©2018 DecSoft. All rights reserved.