DecSoft Support - Crear un slider de texto para poner publicidad

Crear un slider de texto para poner publicidad

Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.

DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.

Take a look at our YouTube channel and subscribe to be notified about new videos!

Take a look at some frequently asked questions about us and our products!

Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies.

Create apps and expand their capabilities by using the world's popular programming language: Javascript.

Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.

DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.

DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.

Save time, resources and money creating apps for Android, iOS and more with the same base of code.

DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.

Design for small screen devices but deploy also (without changes) in larger devices like tablets.

DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps.

DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.

Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price!

Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.

Jordi Mesa

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, <br>.item-2, <br>.item-3 {</p>
<p>        display: block;<br>       	position: absolute;<br>       	animation-duration: 20s;<br>        animation-timing-function: ease-in-out;<br>	animation-iteration-count: infinite;<br>}</p>
<p>.item-1{<br>	animation-name: anim-1;<br>}</p>
<p>.item-2{<br>	animation-name: anim-2;<br>}</p>
<p>.item-3{<br>	animation-name: anim-3;<br>}</p>
<p>@keyframes anim-1 {<br>	0%, 8.3% { left: -100%; opacity: 0; }<br>  8.3%,25% { left: 25%; opacity: 1; }<br>  33.33%, 100% { left: -100%; opacity: 0; }<br>}</p>
<p>@keyframes anim-2 {<br>	0%, 33.33% { left: -100%; opacity: 0; }<br>  41.63%, 58.29% { left: 25%; opacity: 1; }<br>  66.66%, 100% { left: -100%; opacity: 0; }<br>}</p>
<p>@keyframes anim-3 {<br>	0%, 66.66% { left: -100%; opacity: 0; }<br>  74.96%, 91.62% { left: 25%; opacity: 1; }<br>  100% { left: -100%; opacity: 0; }<br>}

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>
<p><p class="item-2">[LINEA2]</p></p>
<p><p class="item-3">[LINEA3]

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

Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.