{"id":227823,"date":"2022-09-27T16:52:00","date_gmt":"2022-09-27T13:52:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=227823"},"modified":"2022-11-09T02:39:38","modified_gmt":"2022-11-08T23:39:38","slug":"otimas-transicoes-de-pagina-css-que-voce-pode-usar-hoje-em-seu-site","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/otimas-transicoes-de-pagina-css-que-voce-pode-usar-hoje-em-seu-site\/","title":{"rendered":"\u00d3timas transi\u00e7\u00f5es de p\u00e1gina CSS que voc\u00ea pode usar hoje em seu site\u00a0"},"content":{"rendered":"\n

Anima\u00e7\u00f5es CSS referem-se \u00e0s anima\u00e7\u00f5es usadas para manipular e enfatizar elementos HTML com o uso de CSS \u2014 ou seja, com pouco ou nenhum JavaScript e certamente sem necessidade de Flash.<\/p>\n

Como muitos designers sabem, o uso de JavaScript e Flash para anima\u00e7\u00f5es pode consumir recursos desnecessariamente e, no caso do Flash, n\u00e3o \u00e9 muito seguro.<\/p>\n

As transi\u00e7\u00f5es de p\u00e1gina CSS s\u00e3o transi\u00e7\u00f5es animadas entre p\u00e1ginas que s\u00e3o usadas para dar aos sites aquele toque extra que os distingue como de primeira qualidade e dignos de uma boa navega\u00e7\u00e3o. E quando aplicados corretamente, eles podem n\u00e3o apenas dar uma sensa\u00e7\u00e3o de vivacidade, mas tamb\u00e9m ajudar muito na navega\u00e7\u00e3o.<\/p>\n

Este artigo criado por nossa equipe em wpDataTables (o melhor plugin de tabela do WordPress<\/a>) abordar\u00e1 o que voc\u00ea precisa saber sobre transi\u00e7\u00f5es de p\u00e1gina CSS e como elas funcionam, al\u00e9m de listar alguns dos melhores que voc\u00ea pode usar agora. Role para baixo para saber mais.<\/p>\n

A import\u00e2ncia de adicionar transi\u00e7\u00f5es de p\u00e1gina CSS<\/h2>\n

Mesmo que pare\u00e7a que a anima\u00e7\u00e3o<\/a> n\u00e3o importa muito na hora de construir um site animado<\/a> \u2014 ou, pelo menos, n\u00e3o tanto quanto a capacidade de resposta e usabilidade b\u00e1sica do site \u2014 a verdade \u00e9 que a anima\u00e7\u00e3o pode fazer toda a diferen\u00e7a entre um site bem-sucedido e envolvente local e um furo total.<\/p>\n

As transi\u00e7\u00f5es de p\u00e1gina representam uma pr\u00e1tica que muitas vezes \u00e9 negligenciada no web design, e isso \u00e9 uma pena, considerando o qu\u00e3o impactante elas s\u00e3o. Eles podem mudar toda a sensa\u00e7\u00e3o de um site e a experi\u00eancia que os visitantes t\u00eam com ele<\/a>.<\/p>\n

Muitos designers tendem a evitar anima\u00e7\u00f5es porque acreditam que s\u00e3o comedores de recursos que apenas arrastam o site para baixo e o tornam lento. Isso acontece apenas se as anima\u00e7\u00f5es n\u00e3o forem implementadas corretamente, e \u00e9 aqui que as transi\u00e7\u00f5es de p\u00e1gina CSS mudam o jogo.<\/p>\n

S\u00e3o maneiras criativas e eficientes de adicionar anima\u00e7\u00f5es suaves ao seu site. CSS \u00e9 uma ferramenta poderosa que pode ajudar um site a construir sua personalidade, e abaixo voc\u00ea encontrar\u00e1 uma lista de exemplos que devem inspir\u00e1-lo a usar transi\u00e7\u00f5es de p\u00e1gina CSS para seu pr\u00f3prio site:<\/p>\n

Exemplos de transi\u00e7\u00f5es de p\u00e1gina CSS<\/h2>\n

Layout legal com transi\u00e7\u00f5es de p\u00e1gina sofisticadas e menu fora da tela<\/h3>\n

\"\u00d3timas<\/a><\/p>\n

Este layout de transi\u00e7\u00e3o de p\u00e1gina da web foi criado por NikolayTalanov e s\u00f3 fica bem em tela cheia em uma \u00e1rea de trabalho grande. A ideia original foi implementada em canvas HTML5, mas Nikolay habilmente a adaptou para uma vers\u00e3o CSS.<\/p>\n

As transi\u00e7\u00f5es de p\u00e1gina CSS parecem \u00f3timas, mas a desvantagem \u00e9 que os usu\u00e1rios podem experimentar alguns blocos tr\u00eamulos ou desaparecendo se os valores de z-index do seu site n\u00e3o estiverem configurados corretamente.<\/p>\n

f\u00f3lio.transi\u00e7\u00f5es<\/strong><\/h3>\n

\"\u00d3timas<\/a><\/p>\n

Esta transi\u00e7\u00e3o de p\u00e1gina foi criada e lan\u00e7ada pela Foliodot e \u00e9 uma das favoritas do mercado. Ele tem uma p\u00e1gina pronta para uso e transi\u00e7\u00f5es de se\u00e7\u00e3o que s\u00e3o simplesmente lindas. Eles ficariam incr\u00edveis em qualquer site, independentemente do tipo.<\/p>\n

Pagina\u00e7\u00e3o e layout com divs de fundo recortados<\/strong><\/h3>\n

\"\u00d3timas<\/a><\/p>\n

Nikolai Talanov veio com uma das melhores transi\u00e7\u00f5es de p\u00e1gina CSS que voc\u00ea ver\u00e1 por a\u00ed. Talanov fez esse conceito tendo em mente que muitas pessoas usam seus teclados para navegar em um site, simplesmente clicando para cima e para baixo.<\/p>\n

As transi\u00e7\u00f5es de p\u00e1gina funcionam bem dessa maneira e tamb\u00e9m s\u00e3o bastante responsivas. Existem alguns problemas de desempenho tamb\u00e9m, no entanto. O conte\u00fado tende a carregar mais lentamente no in\u00edcio e os usu\u00e1rios podem encontrar problemas ao abrir uma p\u00e1gina com muito conte\u00fado.<\/p>\n

Transi\u00e7\u00f5es do controle deslizante<\/strong><\/h3>\n

\"\u00d3timas<\/a><\/p>\n

MirkoZoric criou essas transi\u00e7\u00f5es de p\u00e1gina CSS explorando o estilo Swiper. Ele usa o popular efeito de paralaxe e brinca com filtros para obter um efeito surpreendente.<\/p>\n

Transi\u00e7\u00e3o de pirulito<\/strong><\/h3>\n

\"\u00d3timas<\/a><\/p>\n

Lollipop, como Jeff McCarthy chamou sua transi\u00e7\u00e3o de p\u00e1gina, \u00e9 semelhante \u00e0 apar\u00eancia do Android 5.0. A transi\u00e7\u00e3o de p\u00e1gina imita a anima\u00e7\u00e3o de gaveta\/pasta do Android 5.0 Lollipop, que usa um efeito circular semelhante a um pirulito.<\/p>\n

contexto<\/strong><\/h3>\n

\"\u00d3timas<\/a><\/p>\n

O Kontext foi criado por Hakim El Hattab e \u00e9 bem direto \u2014 \u00e9 uma transi\u00e7\u00e3o de mudan\u00e7a de contexto que enfatiza que o contexto da p\u00e1gina mudou. Voc\u00ea provavelmente est\u00e1 acostumado a esse tipo de transi\u00e7\u00e3o se tiver usado um dispositivo que executa o iOS.<\/p>\n

Layout legal com anima\u00e7\u00e3o encadeada complexa<\/strong><\/h3>\n

\"\u00d3timas<\/a><\/p>\n

Outra de NikolayTelanov, esta transi\u00e7\u00e3o de p\u00e1gina \u00e9 baseada no Satellite Website Prototype<\/a> e \u00e9 criada adicionando 2 classes com JavaScript e um simples hover. Este \u00e9 um recurso de demonstra\u00e7\u00e3o e possui anima\u00e7\u00f5es de encadeamento.<\/p>\n

\u00c9 uma transi\u00e7\u00e3o responsiva que tamb\u00e9m \u00e9 f\u00e1cil de manter em rela\u00e7\u00e3o ao SCSS.<\/p>\n

Ei, voc\u00ea sabia que os dados tamb\u00e9m podem ser bonitos?<\/h3>\n

wpDataTables<\/a> pode torn\u00e1-lo assim. H\u00e1 uma boa raz\u00e3o pela qual \u00e9 o plugin n\u00ba 1 do WordPress para criar tabelas e gr\u00e1ficos responsivos.<\/p>\n

\"\u00d3timas<\/a><\/p>\n

Um exemplo real de wpDataTables em estado selvagem<\/p>\n

E \u00e9 muito f\u00e1cil fazer algo assim:<\/p>\n

    \n
  1. Voc\u00ea fornece os dados da tabela<\/li>\n
  2. Configure e personalize<\/li>\n
  3. Publique-o em um post ou p\u00e1gina<\/li>\n<\/ol>\n

    E n\u00e3o \u00e9 apenas bonito, mas tamb\u00e9m pr\u00e1tico. Voc\u00ea pode criar tabelas grandes com at\u00e9 milh\u00f5es de linhas<\/a>, ou pode usar filtros e pesquisas avan\u00e7adas<\/a>, ou pode enlouquecer e torn\u00e1-las edit\u00e1veis<\/a>.<\/p>\n

    "Sim, mas eu gosto muito do Excel e n\u00e3o h\u00e1 nada assim em sites". Sim, h\u00e1. Voc\u00ea pode usar a formata\u00e7\u00e3o condicional<\/a> como no Excel ou no Planilhas Google.<\/p>\n

    Eu te disse que voc\u00ea tamb\u00e9m pode criar gr\u00e1ficos<\/a> com seus dados? E isso \u00e9 apenas uma pequena parte. Existem muitos outros recursos<\/a> para voc\u00ea.<\/p>\n

    Transi\u00e7\u00f5es de texto semelhantes a Uber<\/strong><\/h3>\n

    \"\u00d3timas<\/a><\/p>\n

    Nicolas Engler criou essas tradu\u00e7\u00f5es que lembram as que voc\u00ea v\u00ea no Uber. Eles passam de um slide para o outro de forma muito suave e s\u00e3o perfeitos para interfaces simples.<\/p>\n

    Carrossel 3D dividido<\/strong><\/h3>\n

    \"\u00d3timas<\/a><\/p>\n

    Como o nome sugere, Paul Noble teve uma ideia interessante que usa o padr\u00e3o carrossel, s\u00f3 que \u00e9 baseado em uma transi\u00e7\u00e3o de painel dividido em diferentes dimens\u00f5es. Este \u00e9 um dos estilos de transi\u00e7\u00e3o de p\u00e1gina CSS mais usados, com certeza.<\/p>\n

    Efeito de revela\u00e7\u00e3o de p\u00e1gina multicamada fict\u00edcia<\/strong><\/h3>\n

    \"\u00d3timas<\/a><\/p>\n

    Mehmet Burak Erman \u00e9 o criador deste lindo efeito de revela\u00e7\u00e3o de p\u00e1gina. Foi constru\u00eddo em um estilo multi-camada, com a ajuda de HTML, CSS e JavaScript. Atualmente, a transi\u00e7\u00e3o de p\u00e1gina \u00e9 compat\u00edvel com Chrome, Firefox, Opera e Safari.<\/p>\n

    Transi\u00e7\u00e3o de p\u00e1gina de blocos (CSS)<\/strong><\/h3>\n

    \"\u00d3timas<\/a><\/p>\n

    Milan Ricoul criou essa transi\u00e7\u00e3o de p\u00e1gina de blocos usando CSS e obteve grande reconhecimento. Milan o criou usando a combina\u00e7\u00e3o cl\u00e1ssica de HTML, CSS e JavaScript e \u00e9 compat\u00edvel, como o de Mehmet Erman, com a maioria dos navegadores.<\/p>\n

    P\u00e1gina de transi\u00e7\u00e3o do artigo<\/strong><\/h3>\n

    \"\u00d3timas<\/a><\/p>\n

    Esta \u00e9 uma das transi\u00e7\u00f5es de p\u00e1gina CSS criadas por Muna. Foi inicialmente inspirado no ReAlign 2 no site Dribble usando CSS, mas tamb\u00e9m \u00e9 baseado em HTML e JavaScript. Em compara\u00e7\u00e3o com outras transi\u00e7\u00f5es de p\u00e1gina na Web, tamb\u00e9m \u00e9 compat\u00edvel com o Microsoft Edge.<\/p>\n

    Transi\u00e7\u00e3o de p\u00e1gina simples<\/strong><\/h3>\n

    \"\u00d3timas<\/a><\/p>\n

    N\u00e3o h\u00e1 muito a dizer sobre esta transi\u00e7\u00e3o de p\u00e1gina \u2014 \u00e9 exatamente como \u00e9 nomeada: simples. Ele foi criado por ktsn e \u00e9 baseado em HTML-Pug, CSS\/SCSS e JavaScript com vue.js. Voc\u00ea deve experiment\u00e1-lo se estiver procurando por algo simples, mas impressionante.<\/p>\n

    Revelar anima\u00e7\u00e3o de conte\u00fado (e menu)<\/strong><\/h3>\n

    \"\u00d3timas<\/a><\/p>\n

    Tobias Glaus \u00e9 o criador deste conte\u00fado simples e anima\u00e7\u00e3o de menu. \u00c9 baseado em um simples efeito de revela\u00e7\u00e3o, mas \u00e9 t\u00e3o eficaz quanto deveria ser. Se voc\u00ea quer apenas uma transi\u00e7\u00e3o b\u00e1sica de p\u00e1gina CSS com esse estilo de revela\u00e7\u00e3o elegante, esta \u00e9 uma das suas principais op\u00e7\u00f5es.<\/p>\n

    Efeito de transi\u00e7\u00e3o de p\u00e1gina de cart\u00e3o de expans\u00e3o<\/strong><\/h3>\n

    \"\u00d3timas<\/a><\/p>\n

    Este \u00e9 um peda\u00e7o de c\u00f3digo que ainda est\u00e1 sendo trabalhado por Rachel Smith, mas tem um grande potencial. N\u00e3o est\u00e1 pronto para ser usado como uma transi\u00e7\u00e3o completa, mas seu criador o ofereceu para teste. Ap\u00f3s a conclus\u00e3o, a transi\u00e7\u00e3o ser\u00e1 utiliz\u00e1vel em v\u00e1rios navegadores e acess\u00edvel em todas as plataformas.<\/p>\n

    Transi\u00e7\u00f5es de p\u00e1gina<\/strong><\/h3>\n

    \"\u00d3timas<\/a><\/p>\n

    Este \u00e9 o projeto do MergimUjkani e a transi\u00e7\u00e3o consiste em uma tela simples com bot\u00f5es\/menus para navegar. Se voc\u00ea se lembra de como as TVs antigas costumavam desligar diminuindo o tamanho da tela em uma linha fina, j\u00e1 sabe como \u00e9 essa transi\u00e7\u00e3o.<\/p>\n

    Aqueles que precisam de transi\u00e7\u00f5es de p\u00e1gina CSS vintage devem experimentar esta.<\/p>\n

    Transi\u00e7\u00e3o de p\u00e1gina de miniatura para tela cheia<\/strong><\/h3>\n

    \"\u00d3timas<\/a><\/p>\n

    Essa transi\u00e7\u00e3o perfeita de uma miniatura para uma p\u00e1gina em tela cheia \u00e9 uma necessidade absoluta. Steve Gardner usou anima\u00e7\u00f5es CSS e Angular para mont\u00e1-lo. Ao us\u00e1-lo, voc\u00ea pode expandir qualquer miniatura em um plano de fundo em tamanho real.<\/p>\n

    Carregador de transi\u00e7\u00e3o de p\u00e1gina<\/strong><\/h3>\n

    \"\u00d3timas<\/a><\/p>\n

    ArsenZbidniakov surgiu com esse conceito de pr\u00e9-carregador que pode ser usado sempre que voc\u00ea abre uma nova p\u00e1gina em um site. Ele consiste em um carregador de c\u00edrculo SVG que possui um efeito de transforma\u00e7\u00e3o adicional.<\/p>\n

    Essa transi\u00e7\u00e3o de p\u00e1gina CSS funcionaria bem em sites vision\u00e1rios com muito conte\u00fado multim\u00eddia.<\/p>\n

    Menu CSS de navega\u00e7\u00e3o de uma p\u00e1gina<\/strong><\/h3>\n

    \"\u00d3timas<\/a><\/p>\n

    Alberto Hartzet criou este menu CSS<\/a> de navega\u00e7\u00e3o de uma p\u00e1gina que inclui algumas se\u00e7\u00f5es e transi\u00e7\u00f5es CSS puras. \u00c9 adequado para sites, portf\u00f3lios e outros sites mais simples que funcionam bem com um design de uma p\u00e1gina.<\/p>\n

    Reagir Transi\u00e7\u00f5es de P\u00e1ginas Animadas<\/strong><\/h3>\n

    \"\u00d3timas<\/a><\/p>\n

    Sarah Drasner criou uma pequena demonstra\u00e7\u00e3o para essas transi\u00e7\u00f5es de p\u00e1gina CSS. Ela o criou usando GreenSock e SVG. As transi\u00e7\u00f5es de p\u00e1gina no React funcionam sem problemas e ficam \u00f3timas ao mesmo tempo, ent\u00e3o v\u00e1 em frente e experimente.<\/p>\n

    Transi\u00e7\u00e3o de design de materiais<\/h3>\n

    \"\u00d3timas<\/a><\/p>\n

    Tanto o estilo quanto a anima\u00e7\u00e3o dessa transi\u00e7\u00e3o s\u00e3o feitos inteiramente em CSS por David Marland. Ele roda sem problemas e cont\u00e9m algum JavaScript para adicionar classes. A transi\u00e7\u00e3o pode ser pausada at\u00e9 que o conte\u00fado seja substitu\u00eddo. Esta \u00e9 uma anima\u00e7\u00e3o de dois est\u00e1gios.<\/p>\n

    Pure CSS Navega\u00e7\u00e3o vertical de uma p\u00e1gina<\/h3>\n

    \"\u00d3timas<\/a><\/p>\n

    A \u00faltima da nossa lista de transi\u00e7\u00f5es de p\u00e1gina CSS, essa transi\u00e7\u00e3o de navega\u00e7\u00e3o vertical CSS pura de Alberto Hartzet tem um layout cl\u00e1ssico para sites de uma p\u00e1gina. Mais uma vez, a transi\u00e7\u00e3o \u00e9 muito simples, mas adiciona um toque agrad\u00e1vel ao site.<\/p>\n

    Considera\u00e7\u00f5es finais sobre essas transi\u00e7\u00f5es de p\u00e1gina CSS<\/h3>\n

    H\u00e1 muita concorr\u00eancia para acompanhar as tend\u00eancias nesse setor, portanto, n\u00e3o \u00e9 de admirar por que decidir algo t\u00e3o simples quanto uma transi\u00e7\u00e3o de p\u00e1gina seja t\u00e3o dif\u00edcil.<\/p>\n

    As transi\u00e7\u00f5es de p\u00e1gina CSS oferecem uma maneira f\u00e1cil de animar seu site sem deix\u00e1-lo carregar lentamente. Al\u00e9m disso, promove um visual mais fresco e adiciona aquele toque de profissionalismo a qualquer site.<\/p>\n

    As transi\u00e7\u00f5es de p\u00e1gina CSS percorreram um longo caminho nos \u00faltimos dois anos, e os usu\u00e1rios devem aproveit\u00e1-las para aprimorar seu UX e manter os usu\u00e1rios clicando ou rolando alegremente.<\/p>\n

    Se voc\u00ea gostou de ler este artigo sobre transi\u00e7\u00f5es de p\u00e1gina CSS, voc\u00ea deve conferir este artigo sobre efeitos de brilho de texto CSS .<\/a><\/p>\n

    Tamb\u00e9m escrevemos sobre alguns assuntos relacionados, como menu m\u00f3vel CSS<\/a>, caixa de pesquisa HTML<\/a>, galeria<\/a> de imagens CSS, editor<\/a> CSS e efeitos de foco de imagem CSS<\/a>.<\/p>\n

    Fonte de grava\u00e7\u00e3o: wpdatatables.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

    As transi\u00e7\u00f5es de p\u00e1gina CSS percorreram um longo caminho nos \u00faltimos dois anos, e os usu\u00e1rios devem aproveit\u00e1-las para aprimorar seu UX e manter os usu\u00e1rios felizes<\/p>\n","protected":false},"author":1,"featured_media":181788,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,753,909,722,920,846,867],"tags":[1170],"class_list":["post-227823","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-codigo-aberto","category-css-8","category-desenvolvedor","category-outro","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/227823","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=227823"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/227823\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/181788"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=227823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=227823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=227823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}