Novas animações trazem sofisticação e elegância aos elementos do Site

Uma nova tendência, a qual muitos templates de grandes CMS já aderiram, é disponibilizar os elementos com carregamento animado. Trata-se de aplicar efeitos visuais em textos, imagens, botões, galerias ou qualquer elemento de um site.

Essa técnica é visualmente agradável e transmite ideia de sofisticação e elegância. São funcionalidades inovadoras e que demonstram que sua empresa está antenada nas últimas novidades do mundo do Web design.

O Wix implantou essa tecnologia no seu editor e agora oferece animações para a maioria dos elementos de um site. São efeitos bonitos e modernos, os quais tem fácil configuração e simples aplicação.

Clique e confira o site que fiz somente para demonstrar um pouco o poder das animações em elementos.

Como adicionar

Agora que você viu o que a animação é capaz de fazer nos elementos, saiba como fazer para adicionar e configurar.

1. Selecione o elemento ao qual deseja aplicar a animação.

2. Clique com o botão direito sobre ele escolha a opção “Adicionar Animação“.

3. Na nova janela serão mostrados várias opções de animação.

4. Ao escolher uma animação, a janela de configurações ira surgir. As opções são.

Duração – Defina quanto tempo a animação será executada. Quanto maior o tempo, mais lentamente ela será apresentada.

Atraso – Defina um tempo de atraso para o efeito começar. Por exemplo, ao definir o,50s, a animação demorará 0,50 segundos para ser executada na página.

OBS: o ícone Player (marcado na figura acima), ao lado do ícone de lixeira, é para que você possa visualizar os efeitos em tempo real na página.

Animar elemento apenas no primeiro carregamento – Ao marcar esta caixa, a animação será executada apenas um vez, o que é o recomendado.

DICA: para adicionar animação a um bloco de elementos, basta clicar sobre um deles e, mantendo a tecla Ctrl (control) pressionada, clicar sobre os outros elementos o qual você deseja adicionar a mesma animação.

E é isso. São belos efeitos que se forem aplicados profissionalmente trazem um resultado excelente.

OBS: essas animações não funcionam em plataformas móveis.

Havendo dúvidas, comente abaixo.

2 comentários em “Novas animações trazem sofisticação e elegância aos elementos do Site”

  1. Boa Noite, Gostaria que você me desse um feedback de como está ficando meu site, estou abrindo essa camisaria.
    HOME-> Está quase pronta, falta tirar uma foto melhor para a sessão The Ray. E falta tirar uma foto melhor para sessão Rare Essence (onde estão as camisas lado a lado)
    LOJA ONLINE -> Produtos cadastrados, estoque arrumado, porém não consigo deixar com cara de loja, olhando lojas onlines tais como zara, ricardo almeida, camisaria colombo, enfim sabe alguma dica pra eu conseguir deixar com mais cara de loja minha pagina “Loja online”? tentei os aplicativos, o melhor que achei foi o ECWID, porém é horrivel a aparência dele e desqualifica muito o site.

    A SEVEN RAY -> Finalizada
    CONTATO -> Finalizado

    Att

    Responder
    • Olá Rodrigo, agradeço a confiança.

      Gostei muito do design geral do site, está seguindo a nova tendência de layout, com aspecto moderno e “flat”. Combinou muito bem com a temática do site.

      Sobre a HOME, só mudaria o Menu, pois essa cor escura está se misturando com o fundo também escuro do cabeçalho e não dá pra ler direito o que está escrito.

      Loja Online -> Não há motivo para você alterar a estrutura do Menu, de uma página para outra, isso só confunde os visitantes. Aquele botão ‘Login/Registre-se’, é inútil para o seu site, pois não cumpre a função que se espera para este tipo de botão.

      Sobre a ferramenta de loja virtual, já tentou a do próprio Wix? Talvez ela se encaixe bem para seu público. Fora isso, tem a Ecwid, que você já disse que não gostou e a Loja Integrada, que você poderia adicionar nessa página.

      No demais, só mesmo usando outra ferramenta e criando uma loja virtual fora do Wix.

      Por último, apenas um detalhe de design. Na página Seven Ray, o texto principal parece estar em negrito, o que deixou com aparência de “borrado”, ao menos em minha tela apareceu esse efeito.

      Enfim, essas são apenas minhas impressões, você não precisa segui-las.

      Um abraço e sucesso!

      Gabriel Martins

      Responder

Deixe um comentário