Animação e Interação

Com

Clóvis Neto

Web Developer

clovisdasilvaneto.github.io/all-animation

Vivemos em um tempo onde a iteração com o usuário é tudo

Se a sua aplicação ou página não trazer uma boa experiência com o usuário (UX), provavelmente ele irá sair e nunca mais irá voltar

Sabendo disso, muitos dev's procuram aprender javascript ou algum framework como jQuey :'(

E realmente, o javascript vai lhe ajudar muito nesta batalha...

Mas como dizia meu pai...

O perigo mora ao lado!

window.onload = function(){
    	var objeto = document.getElementById('objeto');
    	document.getElementById("fadeIn").onclick = function(){
             	fadeIn(objeto,1);
    	}




    	document.getElementById("fadeOut").onclick = function(){
             	fadeOut(objeto,1);
    	}
}



function fadeIn(element,time){
       processa(element,time,0,100);
}



function fadeOut(element,time){
        processa(element,time,100,0);
}



function processa(element,time,initial,end){
    	if(initial == 0){
             	increment = 2;
             	element.style.display = "block";
    	}else {
             	increment = -2;
    	}



    	opc = initial;



    	intervalo = setInterval(function(){
             	if((opc == end)){
                          if(end == 0){
                                         	element.style.display = "none";
                          }
                          clearInterval(intervalo);
             	}else {
                          opc += increment;
                          element.style.opacity = opc/100;
                          element.style.filter = "alpha(opacity="+opc+")";
             	}
    	},time * 10);
}

Porque não dar uma chance para o nosso velho amigo CSS?

O mesmo efeito do código anterior mas com css:

/* só vou colocar -webkit- pois trata-se de exemplo :) */
element {
    -webkit-transition: all ease-out 0.5s;
}

.hide {
    opacity:0;
    visible:hidden;
}

A performance agradece

Exemplo :)

Capturando o clique com css?

:checked & :target

Exemplo :)

:hover

element {
    -webkit-transition:all ease-out 1s;
}

element:hover {
    -webkit-transform: scale(1.2);
}

Exemplo 1

Exemplo 2

Animando com CSS

@keyframes

element {
    -webkit-animation: mymove 5s linear infinite;
}

@-webkit-keyframes mymove {
    0%   {top: 0px;}
    25%  {top: 200px;}
    75%  {top: 50px}
    100% {top: 100px;}
}

Exemplo 1

Exemplo 2

"CSS parece ser inofensível e inútil mas quando nos aprofundamos podemos fazer coisas incríveis"

Dúvidas?

Obrigado!

@clovissneto

facebook.com/ClovisDaSilvaNeto