0

En mi html tengo un ion-title el cuál escribe un título.

El problema que este título no cabe y por lo tanto se corta y me añade tres puntitos ... al final.

Me gustaría darle el efecto de que "fuera avanzando" pero no consigo buscarlo con las palabras adecuadas.

PD: Este efecto es el típico que te encuentras en las estaciones de metro/tren para decirte "Próximas paradas:Barcelona - Madrid - Valencia - Sevilla " y el texto se va desplazando de izquierda a derecha como si lo leyeras. También es el típico efecto que te encuentras en un telediario para mostrarte debajo (al pie de la pantalla) otras noticias. También el efecto que suele hacer las vallas de publicidad de los estadios de fútbol (las vallas que rodean el campo)

He intentando buscar un gif pero no encuentro ninguno debido a lo mal que me expreso.

3
  • A lo mejor "texto móvil" o "marquees" es la palabra que buscas. En HTML la etiqueta <marquee> se utilizaba para crear texto en movimiento. Esta funcionalidad es ya obsoleta.
    – enxaneta
    Commented el 1 jun. 2019 a las 11:30
  • @enxaneta investigaré sobre <marquee>. Gracias por la ayuda.
    – David_helo
    Commented el 1 jun. 2019 a las 11:34
  • 1
    Es cierto lo que dice @enxaneta en mis respuestas, te acabo de responder tu pregunta! Tenes dos opciones o seguir utilizando marquee hasta que quede completamente obsoleto, o comenzar a utilizar CSS, lo cual no vendría mal. Saludos! Commented el 1 jun. 2019 a las 12:40

2 respuestas 2

2

Con HTML tenemos con Marquee. Tal como se mencionaba en los comentarios se encuentra obsoleta, y aún continúa funcionando. Pero la pueden retirar en cualquier momento.

Derecha a Izquierda

<marquee behavior="scroll" direction="left">Here is some scrolling text... right to left!</marquee>

Izquierda a Derecha

<marquee behavior="scroll" direction="right">Here is some scrolling text... left to right!</marquee>

Scroll Arriba

<marquee behavior="scroll" direction="up">Here is some scrolling text... going up!</marquee>

Scroll Abajo

<marquee behavior="scroll" direction="down">Here is some scrolling text... going down!</marquee>

Velocidad

<marquee behavior="scroll" direction="left" scrollamount="1">Very slow...</marquee>
<marquee behavior="scroll" direction="left" scrollamount="10">Faster...</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast...</marquee>
<marquee behavior="scroll" direction="left" scrollamount="50">Lightning!</marquee>

https://www.html.am/html-codes/marquees/html-scrolling-text.cfm

Con CSS tenés una opción alternativa, y un poco más amigable creo yo. También para irte acostumbrado a darle estilo a tus diseños web con CSS.

Esto es CSS

.marquee {
    width: 450px;
    line-height: 50px;
    background-color: red;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

Junto con HTML:

<div class="marquee">
    <p>Test</p>
</div>

https://codepen.io/thomasbormans/pen/EjMBqO

0

Este es un plugin de jQuery que te ofrece el efecto que buscas.

$('.marquee').marquee({
    //speed in milliseconds of the marquee
    duration: 5000,
    //gap in pixels between the tickers
    gap: 50,
    //time in milliseconds before the marquee will start animating
    delayBeforeStart: 0,
    //'left' or 'right'
    direction: 'left',
    //true or false - should the marquee be duplicated to show an effect of continues flow
    duplicated: true
});
.marquee {
  width: 300px;
  overflow: hidden;
  border: none;
  background: #0095ff;
  color: white;
}
<!-- Call jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Call plugin jQuery marquee -->
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script>
<div class="marquee">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.