15 efeitos impressionantes com JS e CSS3

Olá designers, você chegou ao ponto em que seu cérebro se recusa a funcionar mais?

Se você tem e está procurando ideias para fazer sites se tornarem a próxima grande novidade depois de As Crônicas de Fogo e Gelo (série Game of Thrones para a população que não lê livros) sem gastar muito, confira estes 15 CSS3 efeitos que reunimos para você.

De tutoriais a ofertas, oferecemos 15 efeitos incríveis que transformarão sites de blá em uau!

Efeito de paralaxe

Você já navegou pelo site ihatetomatoes comemorando 25 anos do Nintendo Game Boy? Onde você também jogou um pouco de Tetris?

Ou talvez tenha navegado pelo site da Rimmel impressionado com a forma brilhante com que os itens aparecem em um fundo colorido de modelos?

O efeito 3D-esque que parece ser todo o delírio no design agora é tecnicamente chamado de Efeito Parallax. Os designers adoram brincar com isso, mas você precisa ser sutil e estratégico, pois pode sair pela culatra e acabar criando uma bagunça confusa.

O efeito Parallax ou a rolagem Parallax é o resultado do carregamento do plano de fundo em uma velocidade mais lenta do que o seu primeiro plano, criando uma aparência mais 3D. Parece muito trabalho? Não para alguém que trabalha de forma inteligente, obtenha um tema Parallax completamente pronto no Cyberchimps.

Efeito Ken Burns

O documentarista foi pioneiro no conceito de panorâmica e zoom em uma imagem estática. O designer gráfico usou esse efeito abundantemente e você pode até ter encontrado isso em muitos sites.

O efeito não apenas guia os olhos, literalmente, para onde você deseja que o foco esteja, mas também adiciona uma pitada de intensidade a uma imagem. Você se lembra de assistir a um filme em que uma fotografia antiga foi exibida na tela e o narrador fala sobre algo na imagem, enquanto o quadro lentamente se move e se aproxima desse assunto?

O efeito Ken Burns tornou-se bastante popular e com razão, pois dá um facelift instantâneo a qualquer site chato.

Menu de navegação semicircular

Você não precisa se esforçar para mudar a aparência do seu site. Às vezes, apenas acabar com a opção dos homens velhos e chatos pode ajudar.

Em vez disso, opte por uma elegante opção de navegação circular ou semicircular que ajuda a mostrar várias opções de menu. Alguns designers incluem isso apenas para botões de compartilhamento de mídia social, mas você ficaria surpreso com sua versatilidade.

Do óbvio console de música e ícones de compartilhamento de mídia social, ao menu principal e ícones de perfil, há muitas maneiras de aproveitar isso.

Não quer ralar seu cérebro criando este efeito CSS3 do zero? Obtenha um como brinde da DealFuel.

Mostrar/ocultar painel de login

Os painéis deslizantes são comumente usados ​​hoje em dia, mas isso é principalmente para aliviar a carga de muitas guias. Não há designers suficientes para experimentar o potencial desta opção, porque os painéis deslizantes podem ser benéficos de muitas maneiras.

Exiba tópicos de conteúdo, crie uma aparência organizada, melhore a estética ou apenas seja diferente de sites projetados convencionalmente. O painel de login Mostrar/ocultar é obrigatório para todos os sites WordPress, pois fornece uma visão geral do painel com várias opções de menu após o login. Saiba mais sobre este painel aqui.

Formulário de login do controle deslizante

Outra opção do painel de login que desliza para revelar mais conteúdo é uma ótima jogada quando você deseja que os assinantes coloquem um pouco mais de informações do que apenas endereço de e-mail e nome, mas ao mesmo tempo não querem sobrecarregá-los.

Reduzindo o espaço também, definitivamente verifique isso, pois seria útil quando você estiver criando sites com temas minimalistas.

Fitas 3D e efeitos 3D

Se você ainda está intimidado pelo efeito Parallax e tem medo de errar, comece pequeno. Use fitas 3D, diferentes tons e sombras para criar uma ilusão geral de profundidade em seu site, renderizando assim um efeito 3D.

As fitas 3D em si parecem absolutamente incríveis. Use isso para destacar uma parte do site ou em um documento de certificação oficial que você deseja colocar, isso aumentaria o apelo visual geral da página.

Saiba como criar o efeito usando CSS3 no pvmgarage.

Efeito Coverflow

Usado predominantemente em sites baseados em livros, você definitivamente viu esse efeito em seu dispositivo Mac ou Apple quando navegou pelas fotos. O efeito Coverflow apresenta vários itens – como capas de livros – onde você pode deslizar para a esquerda ou para a direita para ver a capa, obter alguns detalhes pop-up e selecioná-los.

Isso soa interessante? Você gostaria de implementar isso em um projeto? Se sim, então definitivamente navegue por esta peça.

Transições CSS3

Designers que jogam de forma inteligente e não difícil sabem que não é preciso muito para adicionar mojo ao seu site, uma mudança de tema aqui, alguns elementos de sombra e sombra ali e você pode realmente transformar sua página. Outra maneira de fazer isso é animar o conteúdo da sua página por meio de transições CSS3.

Do espaçamento das letras à sombra do texto, brinque com tudo o que quiser para ver o que melhor se adapta. Além disso, aqui está um ótimo brinde que inclui uma ampla variedade de efeitos de transição.

Animação CSS3 com tema de neve

Ainda se recuperando do efeito da temporada de férias? As animações CSS3 com tema de neve não têm apenas um toque festivo, mas também funcionam notavelmente bem para determinados sites, como o de uma marca de sorvete.

É rápido e fácil de usar e pode alterar a aparência do seu site ou página do blog para complementar um tema ou uma temporada.

Animação

Animações podem fazer maravilhas para sites, mesmo que sejam sutilmente feitas. Ele chama a atenção e também ajuda nas conversões, pois a atenção é direcionada para a chamada à ação.

Ou simplesmente, adiciona ao valor de face de uma página se nada mais. Aqui estão alguns ótimos efeitos especiais de animação que você pode conferir.

Efeito tipográfico

Você provavelmente já viu essas postagens de citações do Instagram com a aparência de texto em relevo? É assim que o efeito Letterpress se parece e também está se tornando bastante popular em web design.

Isso tem uma sensação de datilografia inversa, mas exibe uma aparência elegante e elegante. Definitivamente recomendado se o seu for uma publicação online ou um blog. Além disso, se você quiser dar um toque profissional sem ser todo C-suite, isso ajudaria. Aqui está um tutorial sobre como você pode usar o efeito de tipografia com CSS3.

Virando Círculo

Um pouco de informação não apenas nunca fez mal a ninguém, mas também pode ser a USP do site. Um site como aquele que lança fatos aleatórios a cada atualização pode ser transformado em uma espécie de galeria com fotos com uma pequena alça, que quando clicada abre para mostrar algumas curiosidades divertidas.

Mas mesmo em sites comuns, um círculo invertido é de muita importância. Ele compacta as informações, para que você não tenha uma página repleta de texto. E também tem uma sensação 3D legal. Aqui está um tutorial sobre como criar um círculo giratório.

Megamenu

Você provavelmente já os viu em sites de comércio eletrônico onde muitas categorias precisam ser colocadas diretamente na página de destino, mas sem criar uma barra de menu lotada.

A opção Mega Menu também é obrigatória para o setor educacional, tem um site da universidade que mostra todos os principais cursos, informações de admissão, resultados dos alunos e muito mais?

O Mega Menu pode ajudar a organizar, criar uma opção de barra de menu mais nítida e mais elegante e não confundir os leitores a clicar na opção errada por causa de opções de menu mais longas e abafadas. Você também pode fazer um ótimo negócio pegando o Mega Menu responsivo gratuitamente.

Galeria de acordeão

Existem duas maneiras de manter os leitores engajados em seu site, divulgar conteúdo poderoso e chamar sua atenção para esse conteúdo poderoso. Uma página estática pode chamar a atenção do leitor, mas algo interativo como uma Galeria de Acordeão chamará a atenção do leitor.

Galerias de acordeão – quer você escolha mostrar sua melhor peça de portfólio ou chamar a atenção para seu produto mais vendido – sempre funcionará. Você tem apenas 6 segundos para chamar a atenção do leitor e mantê-lo na página, use a galeria Acordeão para chamar e manter a atenção dele no seu site por muito mais tempo. Aqui está um ótimo plug-in do Accordion Gallery adaptável que você pode pegar gratuitamente.

Caixa de luz

Quão importante é uma galeria de grade? Se você é um fotógrafo, um artista ou simplesmente um blogueiro, isso pode significar seu próximo grande show.

Uma galeria de grade coloca todas as suas melhores peças em exibição! Desde a foto deslumbrante do pôr do sol no topo de uma colina até aquele retrato de rua intenso, impressione-os, divulgue ou simplesmente seduza-os para ganhar um contrato, uma galeria de grade pode ser o seu melhor currículo.

Como designer, isso é algo que você não deve considerar apenas para o trabalho do seu cliente, mas também para o seu próprio site. Faça seu trabalho defender você e atestar sua proeza criativa, uma galeria de grade vale seu peso em ouro.

Mas você recebe de graça neste negócio, então vá pegá-lo agora!

Qual desses você recomendaria a um amigo?