Criando “Marquee” Avançado com Animação CSS3
Hoje vamos dar uma olhada “marquise” de novo. Nós realmente cobrimos sobre isso em nosso post anterior, que falou sobre o uso do -webkit-marquee propriedade, mas desta vez vamos levar este assunto um pouco mais longe.
Neste post, vamos criar um tipo de letreiro efeito usando a Animação CSS3. Dessa forma, poderemos adicionar mais funcionalidades que não poderiam ser obtidas apenas com o -webkit-marquee.
A menos que você já esteja familiarizado com o módulo CSS3 Animation, recomendamos que você dê uma olhada nas seguintes referências antes de continuar com esta documentação:
- Animações CSS3 - W3School
- Animações CSS - Mozilla Dev. Rede
Observe também que, no momento, o CSS3 Animation só funciona no Firefox 8+, no Chrome 12+ e no Safari 5.0+ com a versão prefixada (-moz- e -webkit-). No entanto, usaremos somente a versão oficial do W3C sem o prefixo para evitar que esse artigo seja sobrecarregado com códigos supérfluos.
Resolver o problema do letreiro
Um dos problemas com marquise é que o texto está em movimento contínuo. Esse comportamento é prejudicial para a leitura e o texto também é difícil de ler. Desta vez, tentaremos criar nossa própria versão do letreiro e torná-lo mais amigável ao usuário. Por exemplo; em vez de ter o texto movido continuamente, vamos pará-lo quando estiver totalmente visível, para que o usuário possa ler o texto por um momento.
O Storyboard (mais ou menos)
Toda criação criativa e de design, como um logotipo, uma ilustração ou um site, geralmente começa com um esboço. No campo da produção de animação, isso é feito com um storyboard. Antes de começarmos qualquer codificação, primeiro criaremos um tipo de storyboard, para nos ajudar a visualizar nossa animação.
Como você pode ver no storyboard acima, planejamos mostrar apenas duas linhas de texto, que serão movidas sequencialmente da direita para a esquerda.
Nosso storyboard não é tão complicado quanto um storyboard para um filme de animação real, mas o ponto é: agora podemos visualizar como nossa marca de seleção será semelhante.
A marcação HTML
Como a nossa animação será simples, a marcação HTML também será tão simples quanto:
Como adicionar postagens relacionadas ao WordPress sem plugins
Automatize seus arquivos do Dropbox com ações
Os estilos básicos
Antes de trabalhar com as animações, vamos adicionar alguns estilos básicos. Vamos começar adicionando uma textura de fundo para o html elemento.
html background: url ('… /images/skewed_print.png'); Em seguida, colocaremos a marca de seleção no centro da janela do navegador, além de adicionar alguns detalhes, como sombra interna, cor de fundo e bordas.
.letreiro largura: 500px; altura: 50 px; margem: 25px auto; estouro: oculto; posição: relativa; borda: 1px sólido # 000; margem: 25px auto; cor de fundo: # 222; -webkit-border-radius: 5 px; raio de fronteira: 5 px; -webkit-box-shadow: inserção 0px 2px 2px rgba (0, 0, 0, 0,5), 0px 1px 0px rgba (250, 250, 250, 0,2); box-shadow: inserção 0px 2px 2px rgba (0, 0, 0, 0,5), 0px 1px 0px rgba (250, 250, 250, 0,2);
Então, vamos posicionar o texto - que neste caso é envolto por uma tag de parágrafo - absolutamente, e já que o absoluto posição fará com que o elemento colapso, teremos que definir o elemento da largura para 100% de modo a cobrir a largura de seus pais.
.letreiro p posição: absoluto; font-family: Tahoma, Arial, sem serifa; largura: 100%; altura: 100%; margem: 0; altura da linha: 50 px; texto-alinhar: centro; cor: #fff; text-shadow: 1px 1px 0px # 000000; filter: dropshadow (cor = # 000000, offx = 1, offy = 1);
Vamos dar uma olhada no resultado por um tempo.
Neste ponto, fizemos todos os estilos básicos de que precisamos; você é livre para adicionar mais ou personalizar os estilos. Mas, sugerimos que você fique com nossa dimensão de letreiro especificada (a altura e a largura) até o final do tutorial.
A animação
Em suma, a animação é uma apresentação de objetos em movimento. Cada movimento é definido em um período de tempo. Então, quando estamos trabalhando em animação, estamos lidando principalmente com o Tempo. Levamos em consideração assuntos como:
- Quando o objeto começa a se mover?
- Quanto tempo leva para o objeto se mover de um ponto para outro??
- Quando e por quanto tempo o objeto deve permanecer em um determinado ponto?
Em CSS3 Animation, o Tempo pode ser definido com o @keyframe sintaxe. Mas, antes de entrar nesta seção, vamos primeiro especificar a posição inicial do texto do letreiro.
Planejamos que o texto comece a partir da direita e depois vá para a direita. Então, aqui vamos primeiro posicioná-lo à direita usando a propriedade Transformação CSS3.
.letreiro p transform: translateX (100%);
Lembre o 100% que definimos para o nosso elemento de parágrafo foi igual ao seu pai largura. Então, o mesmo também será aplicado aqui; o elemento de parágrafo será traduzido à direita para 100% que neste exemplo é igual a 500 px.
Quadros-chave
o @keyframe A sintaxe pode ser um pouco intrigante para algumas pessoas, então aqui nós criamos um guia visual simples para ajudá-lo a entender facilmente o que está acontecendo @keyframe sintaxe.
Clique aqui para ver a versão maior.
Toda a animação vai durar cerca de 20 segundos e é dividido em duas seqüências duradouras 10 segundos cada.
Na primeira seqüência, o primeiro texto será inserido instantaneamente a partir da direita e permanecerá visível momentaneamente para permitir que o usuário leia o texto, enquanto o segundo texto permanecerá oculto. Na segunda sequência, o primeiro texto de letreiro deslizará para a esquerda e o segundo texto será inserido imediatamente à direita.
E aqui estão todos os códigos de quadro-chave que precisamos aplicar para executar a animação.
@keyframes left-one 0% transform: translateX (100%); 10% transform: translateX (0); 40% transform: translateX (0); 50% transform: translateX (-100%); 100% transform: translateX (-100%); @keyframes left-two 0% transform: translateX (100%); 50% transform: translateX (100%); 60% transform: translateX (0); 90% transform: translateX (0); 100% transform: translateX (-100%);
o esquerda-um quadros-chave definirão a primeira seqüência da animação, enquanto o esquerda dois quadros-chave definirão a segunda sequência.
Aplicando Animação aos Elementos
Para a animação funcionar, não se esqueça de aplicar a animação ao elemento. A primeira sequência é aplicada para o primeiro texto ou, neste caso, o primeiro parágrafo e a segunda sequência é aplicada para o segundo parágrafo também.
.letreiro p: n-filho (1) animação: esquerda-um 20s facilidade infinito; .marquee p: n-filho (2) animação: esquerda-dois 20s facilidade infinita;
Todos terminamos com nossa animação; vamos ver os resultados no navegador.
- Demonstração
- Fonte de download
Bônus
Também podemos definir o texto do letreiro para movê-lo de cima para baixo ou vice-versa, assim como fizemos em nosso post anterior. Aqui está como fazer isso; substituir nossos códigos de animação acima com este abaixo para mova o texto para baixo:
.marquee p transform: translateY (-100%); @keyframes down-one 0% transform: translateY (-100%); 10% transform: translateY (0); 40% transformar: translateY (0); 50% transform: translateY (100%); 100% transform: translateY (100%); @keyframes down-two 0% transform: translateY (-100%); 50% transform: translateY (-100%); 60% transformar: translateY (0); 90% transform: translateY (0); 100% transform: translateY (100%);
Observe que mudamos o Eixo X para Eixo Y e virar todo o tradução valor negativo para positivo e vice-versa.
Nos tambem temos renomeado a animação para baixo-um e baixo-dois, então precisamos aplicar novamente o nome da animação no elemento de parágrafo.
.letreiro p: nth-child (1) animação: down-one facilidade de 20s infinito; .marquee p: nth-child (2) animação: down-two 20s facilidade infinita;
Ou então, se você quiser mudar o oposto; de baixo para cima. Aqui estão todos os códigos que você precisa aplicar:
.marquee.up p transform: translateY (100%); .marquee.up p: nth-child (1) animação: up-one facilidade de 20s infinito; .marquee.up p: nth-child (2) animação: up-two 20s facilidade infinita; @keyframes up-one 0% transform: translateY (100%); 10% transform: translateY (0); 40% transformar: translateY (0); 50% transform: translateY (-100%); 100% transform: translateY (-100%); @keyframes up-two 0% transform: translateY (100%); 50% transform: translateY (100%); 60% transformar: translateY (0); 90% transform: translateY (0); 100% transform: translateY (-100%);
- Demonstração
- Fonte de download
Conclusão
Apesar da falta de suporte ao navegador atual, o CSS3 Animation, se feito corretamente, sem dúvida resolverá muitos problemas de usabilidade no futuro, como fizemos neste exemplo. Se precisarmos apenas de uma breve animação destinada a navegadores modernos, usar CSS3 Animation provavelmente é melhor do que ter que carregar um script jQuery.
Por fim, estamos cientes de que este artigo pode ser um pouco confuso para algumas pessoas, por isso, se você tiver alguma dúvida sobre este artigo, sinta-se à vontade para publicá-lo na seção de comentários abaixo..
