Skip to main content
se añadieron 933 caracteres en el cuerpo
Origen Enlace
Hello World
  • 497
  • 3
  • 11

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

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 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

Origen Enlace
Hello World
  • 497
  • 3
  • 11

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