Crie lindas transições gradientes com Granim.js
Web design é cheio de beleza e design de interface agradável. Alguns recursos são funcionais, enquanto outros são apenas para mostrar. Transições de gradiente está unicamente para mostrar mas eles embalam bastante um soco!
Com Granim.js, você pode construir transições gradientes de cores personalizadas que parece suave e malha muito bem com qualquer site.
Você pode encontrar um monte de exemplos personalizados na página principal de exemplos com muitos estilos diferentes, desde transições simples até animações mais complexas usando imagens de fundo.
Granim é a única biblioteca JS que eu conheço lidando com transições de gradiente. Essa é uma pergunta que eu sempre me perguntei e nunca encontrei uma grande resposta. Granim é a solução perfeita e é construído em baunilha JavaScript, para que ele possa ser executado ao lado do jQuery ou de qualquer outra biblioteca JS.
Somente largue o granim.js arquivo na sua página para começar. Você pode baixar uma cópia do GitHub ou fazer uma do CDN ao vivo.
Aqui um exemplo de código básico do repositório do GitHub:
As coisas podem ficar muito mais complicadas do que isso, então você deveria cavar os exemplos aprender mais. Você vai encontrar trechos de código em cada exemplo então você pode criar transições de gradiente para fundos de imagem e até máscaras de imagem.
As máscaras de imagem podem ser usadas para um logotipo, por exemplo, uma imagem PNG, que fica oculta atrás de um gradiente. Isso permite criar um logotipo animado JS onde o gradiente transições lentas ao longo do texto.
Observe este exemplo leva muito de código JS / CSS por isso não é uma implementação simples.
Mas quanto mais você praticar com o Granim, mais fácil será configurar e personalizar. E sendo esta a única verdadeira biblioteca de transição gradiente on-line, é a melhor solução absoluta para qualquer projeto.
A biblioteca ainda é atualizada com frequência para que você possa verificar a guia de problemas para obter mais informações.
Está uma pequena biblioteca então não há muitas coisas para dar errado ou precisar de atualização. É isso que faz do Granim.js uma solução confiável para qualquer site pequeno ou grande.
Para baixe uma cópia visite a página de lançamentos no GitHub ou pegue uma cópia do .js arquivo diretamente do cdnjs. E para ver a fonte em um exemplo ao vivo Dê uma olhada neste demo CodePen criado por Jonathan Schneider.
