Cómo hacer una línea continua en html. Elimine los enlaces externos de la nueva plantilla estándar de Blogger. Google Plus está cerrando

<
A menudo, al escribir su sitio web o administrarlo, es necesario instalar una línea progresiva en el sitio. Este elemento de diseño atrae la atención de los visitantes hacia el secciones requeridas sitio, y también puede resaltar cierta información sobre primer plano, que dará prioridad a la visualización el tema deseado.

Utilizan el ticker para diversos fines, por ejemplo, mensaje publicitario, noticias, promociones, anuncios, imágenes, emoticonos, banners, etc.

Crear un ticker en un sitio web es tan fácil como pelar peras.

Para crear una línea rastrera usa esta etiqueta especial"marquesina", que le ayudará a crear un teletipo. Inicialmente solo funcionaba en el navegador. Explorador de Internet, pero ahora en casi todos los navegadores (no revisé solo. Google Chrome), en otros funciona bien.

1. LA REGISTRO ESTÁNDAR DE ENTRADAS es la siguiente:

Texto en ejecución

Inserte un título, saludo o anuncio entre estas etiquetas (EN LUGAR DE MIS PALABRAS "TEXTO TICKING") y obtendrá un símbolo. Se verá así.

HACIENDO UNA LÍNEA DE CRUCKING

La línea continua puede ser no solo texto, sino también una imagen y un enlace a algún sitio. Puede ser cualquier texto que haya creado en sitios que crean hermosas inscripciones. Como, por ejemplo, el “texto quemado” del post anterior.

El texto se puede formatear de la misma manera que en una publicación. Por ejemplo, hagámoslo grande, en negrita, en color, en cursiva, etc.

Y al mostrar tu imaginación o definir los objetivos para usar textos en tu diario, puedes encontrar opciones bastante increíbles para escribir tickers para tus publicaciones.

Intentaré mostrarte los más comunes.

2. El ancho y el alto de la línea en ejecución se pueden establecer mediante ciertos parámetros, es decir, establecer el ancho de la línea y su alto. Ahora la fórmula se verá así.

Tamaños de bloque de filas definidos

Dónde ancho=" "- ancho de bloque para línea
altura=" "- altura del bloque para la línea

Se verá así.
Se especifican la altura y el ancho de la línea.

3. CAMBIAR EL FONDO DE LA LÍNEA CRUJIENTE.
El fondo de la línea en ejecución se puede configurar según lo que necesite. Esta es la fórmula. No es necesario establecer los tamaños de línea. Los puse en la primera fórmula, pero no en la segunda.

Cambiar el fondo de la FILA

Dónde bgcolor=" "- atributo que establece el parámetro de color de fondo

Se parece a esto

cambiar el fondo de la FILA

cambiar el fondo de la LÍNEA, sin especificar el ancho y largo

4. MOVIMIENTO DE IZQUIERDA A DERECHA.

Como por defecto la línea se mueve de derecha a izquierda, para hacer lo contrario utilizamos esta fórmula.

Movimiento de izquierda a derecha

Dónde izquierda- movimiento de derecha a izquierda (por defecto)
bien- movimiento de izquierda a derecha

Se verá así
MOVIMIENTO DE IZQUIERDA A DERECHA.

5. MOVIMIENTO CONSTANTE EN AMBOS SENTIDOS.
Puede configurar el movimiento de la línea constantemente, es decir, se moverá alternativamente en ambas direcciones... Aquí está la fórmula.

Dónde alternar

Se verá así
MOVIMIENTO CONSTANTE EN AMBOS SENTIDOS

6. MOVIMIENTO DE ABAJO ARRIBA.
Una línea o imagen puede moverse no sólo en lados diferentes, pero también de abajo hacia arriba. Aquí es mejor establecer un límite en la línea (especialmente la altura) o la imagen; de lo contrario, se extenderá por toda la página y ocupará mucho espacio. Esta es la fórmula.

>de abajo hacia arriba

Dónde arriba- movimiento de abajo hacia arriba

Se verá así

MOVIMIENTO DE UNA PUNTA O IMAGEN DE ABAJO HACIA ARRIBA

7. MOVIMIENTO DE ARRIBA A ABAJO.
Puedes hacer que el texto se mueva y viceversa de ARRIBA A ABAJO. Esta es la fórmula.

De arriba hacia abajo

Dónde abajo- movimiento de arriba a abajo

Se verá así
MOVIMIENTO DE UNA PUNTA O IMAGEN DE ARRIBA A ABAJO

8. CAMBIAR LA VELOCIDAD DE MOVIMIENTO A UNA VELOCIDAD MÁS LENTA.
La velocidad de la puntada también se puede cambiar, hacerla más rápida o más lenta. Para hacer esto, use la siguiente fórmula.

Cambiar la velocidad a lenta

Dónde comportamiento=" "- atributo que establece el tipo de puntada
alternar- movimiento alternativo
dirección=" "- atributo que marca la dirección
cantidad de desplazamiento="1"

Se verá así
VELOCIDAD DE PUNTADA LENTA

9. MOVIMIENTO LENTO DEL PUNTO DE ARRIBA HACIA ABAJO Y VICEVERSA.
También puede ajustar la velocidad de costura hacia arriba y hacia abajo. Para hacer esto, use la siguiente fórmula.

Movimiento lento del texto de abajo hacia arriba y viceversa.

Dónde alternar- movimiento alternativo
dirección=" "- un atributo que marca la dirección (en nuestro caso, de arriba a abajo y viceversa)
cantidad de desplazamiento="1"- establece la velocidad del movimiento de la línea. La cifra de velocidad se puede cambiar.

Se verá así
Movimiento lento del texto de abajo hacia arriba y viceversa.

11. LÍNEA CRUJIENTE CON IMAGEN.
Como ya escribí, no solo se puede mover una línea, sino también cualquier imagen. Todas las fórmulas anteriores también se aplican a las imágenes. Sólo que en lugar de PALABRAS se inserta el código HTML de la imagen. Aquí hay una fórmula a la que puede agregar cualquier parámetro de movimiento.

imagen original.

Agreguemos una fórmula de teletipo y se verá así

aqui estan ejemplos simples línea continua, y si usa su imaginación, puede encontrar opciones bastante increíbles para escribir líneas continuas para sus sitios web.

Escribiré TODAS ESTAS FÓRMULAS OTRA VEZ, CON todos los parámetros. (es decir, se agrega un nuevo valor a cada nueva fórmula y, por lo tanto, la fórmula se vuelve cada vez más larga. Si no necesita TODOS LOS PARÁMETROS, tome las fórmulas anteriores, cada parámetro está allí por separado)

LÍNEA SIMPLE: LOS TAMAÑOS DE FILA POR DEFECTO CAMBIAN EL FONDO DEL MOVIMIENTO DEL TICKER DE IZQUIERDA A DERECHA MOVIMIENTO CONSTANTE EN AMBAS MANERAS
ABAJO ARRIBA ARRIBA ABAJO VELOCIDAD LENTA DE MOVIMIENTO DE UNA LÍNEA MOVIMIENTO LENTO DE TEXTO DE ARRIBA A ABAJO Y VICE VICE LÍNEA CON ENLACE AL SITIO ENLACE AL SITIO (NOMBRE)

Puede eliminar cualquiera de estos parámetros usted mismo. Por ejemplo, no necesita un fondo separado para cada línea, entonces simplemente borre con cuidado este parámetro.

O borre los tamaños de puntada. Sólo recuerda que la fórmula debe estar en la esquina de COTIZACIONES, así que no las elimines.

Inténtalo con valentía y lo lograrás.

¡Y todos corren, corren! Y la línea corre. ¡Detener! ¿Qué línea está corriendo? Por supuesto, corriendo y, por supuesto, ante los ojos de los usuarios en el sitio de otra persona. ¿Quieres uno para ti? No hay problema, ahora aprenderemos a hacer un ticker usted mismo.

¿Quién corre y dónde?

Por línea progresiva nos referimos a un texto de cierta longitud, que realiza un movimiento progresivo o uniforme en cualquier dirección sobre la superficie. área específica páginas. También son posibles variaciones sobre el tema del movimiento rítmico del texto en la línea progresiva.

Suena aburrido, pero parece mucho más divertido.

El rastreo de un sitio web era popular hace unos años. Luego fue utilizado como fuente de noticias o para mostrar textos publicitarios. El principal problema Esa línea era su constancia, que pronto se volvió aburrida.

El punto es que para reemplazar el texto actual, a menudo era necesario ingresar al código html del sitio y cambiarlo por uno nuevo. Está claro que esto no se hacía muy a menudo.

Hoy todo el proceso se ha vuelto mucho más fácil. Si hablamos de CMS, se han escrito muchos complementos especializados para ellos, lo que simplifica enormemente la implementación de un ticker.

Ahora mayoría animación en Internet creada usando tecnologías flash, y el rastreo de texto en el diseño web se considera casi "vintage". Pero aún así, las palabras que corren ante mis ojos no han perdido su prístina belleza.

Se puede utilizar una línea continua como signo del nombre de un sitio o de su sección. También es ideal para colocar cualquier pensamiento inteligente, que puede ser otra forma de atraer la atención de los visitantes del sitio.

Línea progresiva escrita en html

Una línea continua en un sitio web HTML es lo más opción fácil su implementación con amplia gama para la creatividad.

La etiqueta es responsable del movimiento del texto en html. Su sintaxis es:

< marquee >texto

Esta etiqueta tiene muchos significados y atributos:

1) dirección: establece la dirección del movimiento del texto. Valores posibles atributo:

• izquierda - hacia el lado derecho;
• derecha – izquierda;
• arriba – arriba;
• abajo - abajo;

2)comportamiento – es responsable del tipo de desplazamiento. Valores aceptados:

• desplazamiento – movimiento del texto en una dirección;
• diapositiva: movimiento único seguido de una parada (texto emergente);
• Alternar: en una dirección determinada y viceversa.

3)bucle: determina el número de ciclos de repetición. Valores posibles:

• infinito: número infinito de ciclos (valor predeterminado).
• Entero.

4)scrollamount: establece la velocidad de movimiento de la línea progresiva. Toma un valor entero.

5)ancho: establece la longitud del área en movimiento.

6) altura: establece la altura del área móvil.

7)scrolldelay: establece el tiempo de retraso entre ciclos en milisegundos.

Los atributos de etiqueta restantes son comunes a todos los elementos del lenguaje de hipertexto.

La etiqueta fue creada específicamente para el navegador Internet Explorer. Hasta hace poco, algunos otros navegadores no lo aceptaban, pero ahora todo el mundo lo ve.

Y si “juegas” un poco con el código, podrás hacer que no sólo el texto, sino también la imagen se muevan. Y esto ya es nivel de entrada Animación, señores!

Aquí está el código para este ejemplo:

Edrit-Madrid! A donde me lleva!!!

Línea progresiva para Joomla

Para los propietarios de sitios web basados ​​en CMS, el ejemplo anterior no funcionará. Más precisamente, servirá, pero necesita saber dónde puede "pegar" este ejemplo en el código html. Y esto no es fácil.

Todos los CMS se basan en basado en php, que es un lenguaje de programación del lado del servidor. Es en él donde está escrito el código responsable de generar las páginas del sitio. Es decir, cada elemento de la página del sitio ("pie de página", "encabezado") se genera durante la ejecución del código. Entonces edite codigo php No es necesario tener su propio sitio web en un CMS.

La línea progresiva para Joomla se puede implementar instalando complementos especiales. Uno de ellos se llama Texto en movimiento. Veamos su instalación paso a paso:

1. Vaya al panel de control de Joomla. vía punto menú superior“Extensiones” Vaya a “Administrador de extensiones”.
2. En la pestaña “Instalación” del administrador, seleccione la opción de descarga y haga clic en el botón “Instalar”:

3. Luego vaya al "Administrador de complementos".
4. En la siguiente lista encontramos complemento requerido. Márcalo y haz clic en el botón "Cambiar" en la parte superior. Al lado está el botón “Habilitar”, que sirve para activar la extensión:

5. En la siguiente ventana, en los campos "Parámetros básicos", configure los parámetros de visualización para la línea de carrera (longitud, velocidad e intervalo entre ciclos). Después de realizar cambios, no olvide hacer clic en el botón "Guardar" (arriba a la derecha).
6. Luego, a través del elemento del menú principal “Materiales”, vaya a “Administrador de materiales”. En la lista inferior, marque el material requerido y haga clic en el botón "Cambiar" (encierre en un círculo con un lápiz).
7. En el editor, haga clic en el botón "html". Se abrirá una ventana del editor de código en la pantalla. Pégalo allí (texto = Texto requerido). En lugar de “Texto requerido”, escribimos lo que necesitamos y pulsamos en “Actualizar”:

Después de esto, aparecerá una línea continua en el material editado:

Otras opciones para implementar un ticker

El texto continuo se puede implementar no sólo con usando HTML e instalación de complementos. La opción de implementación en javascript se considera bastante buena. A continuación se muestra un ejemplo de cómo funciona:

Aquí hay un fragmento de código que se coloca en la etiqueta:

función outmsg(msg,ctrlwidth) ( msg = " --- "+msg newmsg = msg while (newmsg.length< ctrlwidth) {newmsg += msg} document.write ("") document.write ("") document.write ("") rollmsg() } function rollmsg() { NowMsg=document.Outmsg.outmsg.value NowMsg=NowMsg.substring(1,NowMsg.length)+NowMsg.substring(0,1) document.Outmsg.outmsg.value = NowMsg bannerid=setTimeout("rollmsg()",100) }

Y aquí hay un fragmento de guión que debe colocarse en el lugar donde se muestra la línea progresiva:

outmsg("¡Ves la línea! ¡Está funcionando! ¡¡¡HURRA!!!",70)

También puedes implementar texto en ejecución usando la biblioteca jquery:

El código de ejemplo se proporciona completo. Si lo desea, css, jquery y html se pueden separar en archivos separados:

$(function() ( var marquee = $("#marquee"); marquee.css(("overflow": "hidden", "width": "100%")); // contenedor para texto en forma de span (a IE no le gustan los divs con bloque en línea) marquee.wrapInner(""); marquee.find("span").css(( "width": "50%", "display": "inline-block) ", "text" -align":"center" )); marquee.append(marquee.find("span").clone() // aquí tenemos dos tramos con texto marquee.wrapInner(""); marquee.find(" div").css("ancho", "200%"); var reset = function() ( $(this).css("margin-left", "0%"); $(this). ).animate(( "margin-left": "-100%" ), 12000, "lineal", reset );

.string( ancho:600px; altura:30px; margen:60px auto; altura de línea:28px; relleno: 0 10px; radio-borde:4px; sombra-cuadro:0 1px 2px #777; -moz-border-radius: 4px; -webkit-border-radius:4px; fondo: rgb(238,238,238); fondo: -moz-linear-gradient(arriba, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); -gradiente(lineal, arriba izquierda, abajo izquierda, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))) -gradient(arriba, rgba(238,238,238) ,1) 0%,rgba(204,204,204,1) 100%); -o-linear-gradient(arriba, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); -gradiente lineal (arriba, rgba (238,238,238,1) 0%, rgba (204,204,204,1) 100% fondo: gradiente lineal (hacia abajo, rgba (238,238,238,1) 0 %, rgba (204,204,204,1) 100%); filtro: progid:DXImageTransform.Microsoft.gradient(startColorstr="#eeeeee", endColorstr="#cccccc",GradientType=0);

¿Cuál es el resultado?

Como puede verse en los ejemplos, de todas las implementaciones del ticker, la más "ligera" es la versión html. Y su funcionalidad es mucho más fácil de entender y dominar. Pero esta implementación no es adecuada para sitios en un CMS. Lo único que les queda son los complementos.

Línea progresiva en el sitio.

Al desarrollar un sitio web, un elemento de diseño interesante que llame la atención puede ser una línea progresiva. Es especialmente conveniente utilizarlo para publicar noticias breves, información sobre descuentos, rebajas, etc. Además, un ticker es la forma más sencilla de crear animaciones en un sitio web. La línea de carrera se forma usando la etiqueta ... (la etiqueta de cierre es obligatoria). Originalmente la etiqueta estaba destinada sólo a navegador de internet Explorador, pero otros navegadores también lo entienden y lo admiten, aunque no forma parte de la especificación HTML. Debido a esto, la presencia de una etiqueta en la página generará un código no válido, es decir, un error durante la verificación, pero puede ignorarse. También debe tener en cuenta que los navegadores muestran el contenido del ticker de forma diferente, por lo que al crear un sitio, asegúrese de comprobar su resultado. Como siempre, Internet Explorer ocupa el primer lugar en imprevisibilidad en el procesamiento de código HTML, y la etiqueta no es una excepción. A Google Chrome tampoco le gusta esta etiqueta.

De particular interés para la creación de un sitio web es que el contenido del contenedor no se limita en texto plano y le permite mover cualquier elemento de una página web: imágenes, texto, tablas, elementos de formulario, etc.

50% de descuento al contratar el seguro CASCO a través de Internet. Servicio de lavado de coches gratuito para cada cliente.

La longitud de la línea progresiva se puede limitar configurando el atributo de ancho (longitud de línea) o hspace (sangría de los límites de desplazamiento) en píxeles o porcentajes. Hablando de navegadores, en este ejemplo Tuve que ingresar antes del ticker. espacio sin rupturas() y configure style="letter-spacing: 0em" , ya que sin esta “química” Internet Explorer 7 (¡Debe morir!) mostraba incorrectamente el ticker cuando la escala de visualización de la página era superior al 100%.

Si convierte cualquier elemento de la línea progresiva en un enlace, obtendrá truco interesante"¡Atrápame!" En nuestro ejemplo, para seguir el enlace, debe hacer clic en el auto rojo.

El movimiento de la línea rastrera se puede configurar no solo horizontalmente sino también verticalmente. En este caso, como en el anterior, puedes especificar el tamaño del área en la que se producirá el movimiento ( atributos de ancho y altura de la etiqueta respectivamente):

En este ejemplo, para la línea de teletipo vertical, la diferencia ya es Navegadores Firefox 3.5 e Internet Explorer 7 y 8. Además de la necesidad de insertar un espacio continuo () antes del inicio de la línea progresiva, la inscripción "casco" también se muestra descentrada en ellos, pero en Opera todo está bien. Si lo deseas, puedes practicar usando "thin". métodos HTML para centrar esta etiqueta en los navegadores especificados.

Para la línea progresiva, puede establecer parámetros para elementos en movimiento, lo que facilita la creación. efectos originales. Veamos los atributos principales de la etiqueta:

• comportamiento - tipo de movimiento de elementos lineales rastreros:
  - desplazarse - de borde a borde en una dirección (predeterminado),
  - diapositiva: después de completar un número específico de pasadas, la línea permanece a la izquierda o a la derecha bordes de página,
  - alternativo: la dirección del movimiento cambia a la opuesta después de completar cada ciclo;
• bgcolor: color de fondo de la línea rastrera;
• dirección - dirección de movimiento de la línea rastrera:
  - izquierda - izquierda (predeterminado),
  - correcto - correcto,
  - abajo - abajo,
  - arriba - arriba;
• altura - la altura de la línea rastrera;
• hspace: sangría desde los bordes izquierdo y derecho del área de desplazamiento;
• bucle: la cantidad de veces que se muestra el ticker; de forma predeterminada, repetición infinita (sin fin);
• cantidad de desplazamiento: desplazamiento en píxeles por paso;
• scrolldelay: la cantidad de retraso en milisegundos entre pasos. Se utiliza para ralentizar el movimiento de los elementos del teletipo;
• velocidad verdadera - valor mínimo retrasos entre pasos, predeterminado 60 ms;
• vspace: sangría vertical desde los límites de desplazamiento;
• ancho: ancho del ticker.

El texto y los elementos ubicados dentro de... las etiquetas se pueden formatear como cualquier otro elemento de una página web.

Nota importante: si la longitud de la línea progresiva (texto + imágenes) es mayor que el ancho de la página del sitio, asegúrese de indicarlo parámetro de ancho, para que no haya distorsiones en el diseño en algunos navegadores.

Si la línea rastrera se repite en varias páginas del sitio, entonces es conveniente diseñarla en forma de inserto (incluir), que se puede cambiar rápidamente. Cualquier método para incluir fragmentos en la página de un sitio web servirá. Uno de los más simples - con usando javascript. En la página, en el lugar donde debería estar la línea rastrera, inserte
,
y coloque el texto de la línea progresiva en un archivo separado stroka.js, que colocará en la misma carpeta que las páginas con la línea progresiva. A continuación se muestra una versión de dicho archivo con configuración del color del texto de salida:

// Documento Java
document.write("Texto del ticket ");

Compruebe que la codificación de este archivo sea la misma que la de la página principal. Si estás usando el programa Adobe Dreamweaver, luego, para cambiar la codificación, debe seleccionar la sección del menú Cambiar - Propiedades de página - Nombre/codificación. También puede cambiar la codificación del script en Microsoft Word. Para hacer esto, abra el documento, configure la codificación deseada, si se muestra incorrectamente (vea cómo hacerlo en " Ayuda de Word"), y luego guárdelo de la siguiente manera: Archivo - Guardar como - Texto sin formato- Ahorrar . En la ventana que se abre, puede configurar la codificación requerida.

Por supuesto, usando JavaScript puedes crear efectos adicionales cuando se muestra una línea progresiva. Por ejemplo, al agregar dentro de la etiqueta, la línea en ejecución se detendrá cuando pase el cursor del mouse sobre ella y continuará mostrándola cuando aleje el cursor:

¡Detenme!

Como se indicó anteriormente, la etiqueta genera un código no válido. Si desea evitar esto, puede utilizar otros métodos, por ejemplo, secuencias de comandos JavaScript etc. Este tema se analiza en detalle en el sitio web a-cto.narod.ru. También hay una versión interesante de la línea progresiva: letra por letra. salida de texto, que se puede configurar para cualquier línea del sitio:

Para crear este efecto, inserte en lugar correcto países el siguiente código:

var line="Línea progresiva letra por letra";
velocidad var=150;
var i=0;
función de impresión() (
si(yo++