Ripple Button – Material design (CSS3/HTML5/JS)
O efeito Ripple é quando um clique – gota de tinta como elemento se move para fora radialmente a partir da posição onde o usuário toca/ clica.
Depois do lançamento do Material Design para Android, milhares de desenvolvedores buscaram alternativas para simular os efeitos do SO também na web. Essa narrativa, se tornou ainda mais eminente com o lançamento do framework Material Design Lite, que levou entusiastas e muitos desenvolvedores a ficaram curiosos sobre a construção de alguns efeitos. Um desses efeitos é conhecido como efeito Ripple, onde um clique – gota de tinta como elemento se move para fora radialmente a partir da posição onde o usuário toca/ clica. Este efeito também foi integrado na coleção elementos de papel no projeto Polymer do Google.
Nesta aula, vamos aprender justamente a simular o efeito Ripple, sem usar frameworks, JQuery ou qualquer tipo de plugin, ou seja, vamos usar apenas JavaScript, HTML5 e CSS3 puro. Ficou curioso? Então, dá um play e segura as dicas do vídeo.
É Designer Gráfico por formação, freelancer, autodidata e empreendedor. Atua como Designer Estratégico e desenvolve projetos envolvendo serviços de Design Thinking, Service Design, Growth Hacking, Marketing Digital e Web Design (UI/UX/Front-end). Com quase sete anos de carreira, já atendeu a grandes marcas nacionais e internacionais. Possui uma presença ativa no cenário digital, alimentando três projetos na web: o primeiro é a Ferreira Studios, um canal no Youtube do qual é fundador e que hoje conta com mais de 1,3 milhões de visualizações, onde compartilha reflexões, métodos e aulas sobre design, desenvolvimento web e edição de vídeo, em parceria com o grupo Grupo NZN (empresa curitibana dona de verticais como TecMundo, Baixaki, Minha Série, SuperDownloads, ClickJogos e Megacurioso). Os outros dois projetos são startups, sendo a primeira de serviços veterinários e a segunda de conciliação de pagamentos.
