Você já viu o movimento abrupto de rolagem de texto em um site? Você já se perguntou como foi feito? Você não precisa procurar informações em outro lugar! Esse texto de rolagem é chamado de marca de seleção. Pode ser feito em qualquer cor, pode ser rolado em qualquer direção e muito mais. Veja o Passo 1 abaixo para começar!
- 1 Abra o documento HTML, se ainda não o fez.
- 2 Coloque este código onde deseja que a marca de seleção esteja:
- 3 Selecione uma cor de fundo. Você pode alterar o plano de fundo da linha rastejante especificando um valor hexadecimal (HEX) ou um valor RGB (vermelho-verde-azul) após a parte "background-color:" do código (cor de fundo). O valor padrão acima, # 000080 é azul marinho cor. Uma lista completa de cores e seus significados podem ser encontrados.
- 4 Defina a direção da rolagem. Alterar atributo direção no código para qualquer um dos seguintes itens: direita (da esquerda para a direita), esquerda (da direita para a esquerda (padrão)), para cima (de baixo para cima) ou para baixo (de cima para baixo).
- 5 Indique o número de ciclos de execução da linha de rastejamento. Atributo laço pode ser alterado de acordo com as necessidades - controla quantas vezes a linha rastejante deve se mover. Se você deseja que ele se mova continuamente, abaixe-o.
- 6 Especifique o texto da linha de rastejamento. O texto dentro da tag e a tag rolará o texto na linha rastejante. Escreva o que você deseja exibir.
- 7 Defina a cor do texto. Adicionar atributo estilo discagem interna
- Aqui está um simples código de rolagem de linha rastejante:
Esta é uma linha de rolagem de rolagem.
- As linhas de rastreamento nos sites geralmente são um pouco irritantes.
- Tenha cuidado ao alterar os atributos da linha rastejante.
Linha rastejante em HTML. Noções básicas de HTML para iniciantes. Lição número 9
Olá pessoal!
Continuando a aprender o básico do HTML.
Nesta lição vou contar e ensinar como fazer uma linha rasteira em um documento HTML. Esse é um tipo de animação primitiva em um site sem o uso de editores gráficos.
Uma linha rasteira pode ser usada para exibir notícias, promoções, uma mensagem publicitária e até mesmo para belos momentos de design (por exemplo: uma nuvem no céu se move no cabeçalho de um site). Eu acho que você encontrará a aplicação de uma linha em execução no seu site, e minha tarefa agora é informar como isso é feito e como fica na prática.
Para criar uma linha rasteira, use a tag:
* atributos para linha rastejante
○ cor de fundo do letreiro
Para colorir o fundo da linha de corrida, adicione o atributo "bgcolor" à tag "marquee":
Resultado:
Linha rastejante
○ altura e largura de uma linha de corrida
Para definir a altura e a largura da linha de rastejamento, adicione os atributos "width" e "height" à tag de letreiro:
○ comportamento da linha rastejante
Adicione o atributo "behavior" à marca de seleção com os seguintes valores:
rolagem - rolagem normal (padrão),
slide - a linha começa a partir de uma extremidade e para na outra,
alternativo - a linha se moverá de ponta a ponta
rolagem normal (padrão)
A linha rastejante cruzará de uma borda e parará em outra
a linha se moverá de ponta a ponta
○ direção da linha rastejante
Adicione o atributo direction com os seguintes valores à marca de seleção:
esquerda - move o texto para a esquerda (padrão),
right - move o texto para a direita,
para cima - movimento do texto de baixo para cima,
para baixo - movimento do texto de cima para baixo
mova o texto para a esquerda (padrão)
movimento do texto para a direita
movimento do texto de baixo para cima
movimento de texto de cima para baixo
○ velocidade da linha rastejante
Para ajustar a velocidade de movimentação da linha de rastejamento, adicione o atributo scrollamount à tag de letreiro:
Quanto maior o valor, maior a velocidade.
○ atraso da linha rastejante
Outro atributo com o qual você pode ajustar a velocidade. Quanto maior o valor, menor a velocidade. Adicione o atributo scrolldelay à tag de letreiro:
○ número de carrapatos
Se você precisar especificar um certo número de passagens de linha rastejante, adicione o atributo loop à tag de letreiro:
No exemplo, o valor é "2", o que significa que haverá apenas duas passagens.
○ recuos rastejantes
Se você precisar especificar o recuo nos lados esquerdo e direito, adicione o atributo "hspace" à tag de letreiro:
Como inserir uma imagem em uma linha rasteira
Para inserir uma linha rastejante em uma imagem, insira uma tag que você já conhece entre as tags para exibir a imagem:
Todos os atributos para a tag são válidos neste caso.
Atributos e Parâmetros
1. w - define a largura da linha de corrida em pixels / porcentagem. Aqueles familiarizados com html provavelmente estão familiarizados com esse atributo. Por exemplo:
- w - define a largura para 40%, dependendo da largura do bloco em que o objeto está localizado,
2. height = "number / percent" - define a altura da linha de corrida em pixels / porcentagem. Um exemplo pode ser o mesmo que com o primeiro atributo. Por exemplo:
- height = "400px" - define a altura para 400 pixels,
- height = "30%" - define a altura para 30%, dependendo da altura do bloco em que o objeto está localizado,
Nota: se a linha rastejante consistir em apenas uma linha, a altura poderá ser omitida, pois ela será determinada automaticamente dependendo do tamanho da fonte, que é definido pelo parâmetro font-size: Npx.
3. bgcolor = "color" - define a cor de fundo do contêiner. Você pode selecionar uma cor na página: códigos de cores html. Nota: se o atributo bgcolor não estiver definido, o plano de fundo será a cor de plano de fundo da página.
4. behavior = "parameter" - este é um dos atributos mais importantes da linha de corrida. Ele define o comportamento da linha rastejante. Tem algumas opções diferentes:
• alternativo - a linha de corrida se move ciclicamente: da direita para a esquerda e depois da esquerda para a direita (corre entre as bordas). Por exemplo:
E assim esta linha aparece no site:
• rolagem - a linha rastejante se move para fora da área na direção que o atributo de direção indica (com o parâmetro) e depois repete em ciclos. Na minha opinião, esta opção é mais comum. Por exemplo:
5. direction = "parameters" - define a direção do movimento da linha de rastejamento. Pode levar os seguintes valores:
• para baixo - movimento de cima para baixo. Por exemplo:
6. hspace = "number" - define o recuo da linha horizontal para outros objetos. A tag img popular tem um atributo semelhante.
7. vspace = "number" - define o recuo vertical para outros objetos.
8. loop = "number" - quantas vezes você precisa rolar o conteúdo. O parâmetro especifica um número, que define o número de repetições. Nota: -1 significa um loop de rolagem infinito. O padrão é -1.
9. scrollamount = "number" - a velocidade da linha em movimento. O número define o número de pixels pelos quais o objeto se move em um único ciclo de relógio. Nota: A velocidade padrão é 6 pixels / s. Por exemplo:
10. scrolldelay = "number" - define o atraso entre as etapas da linha de rastejamento em milissegundos. Por exemplo:
No final, darei 2 exemplos do uso de linhas rastejantes. Exemplo usando um objeto div:
