JScript

Programação & Desenvolvimento


Você não está conectado. Conecte-se ou registre-se

Desativando efeitos de hover no scroll

Ir para baixo  Mensagem [Página 1 de 1]

1Desativando efeitos de hover no scroll Empty Desativando efeitos de hover no scroll Sex 04 Abr 2014, 10:04 pm

waghcwb

waghcwb
Desenvolvedores
Desenvolvedores

Eae pessoal, navegando pela internet encontrei um tópico muito interessante em um blog americano e resolvi compartilhar a informação com vocês!!
Até hoje nunca havia me preocupado com FPS no navegador, foi quando li algumas informações que em computadores lentos isso pode atrapalhar bastante no desempenho, tornando as páginas extremamente lentas neles.. Enfim, existem diversas possibilidades para resolver isso, uma bem bacana é desativar os efeitos :hover quando estivermos dando um scroll na página! Vejam o seguinte vídeo:



Notem a diferença entre os dois efeitos.. Um é o browser agindo normalmente, outro é usando o efeito que vamos aprender neste tópico!!

Nosso objetivo é desativar todos os efeitos em hover da página enquanto fazemos um scroll, para isso é necessário conciliar o CSS com o Javascript.

O CSS com essa propriedade
Código:
pointer-events: none

Quando essa propriedade recebe o valor none ela faz com que o elemento meio que deixe de existir no documento, cancelando qualquer interação com o mesmo..

Mas ele sozinho não seria suficiente para o efeito que desejamos!! Para isso vamos usar o seguinte Javascript

Código:
var body = document.body,
    timer;
 
window.addEventListener('scroll', function() {
  clearTimeout(timer);
  if(!body.classList.contains('disable-hover')) {
    body.classList.add('disable-hover')
  }
  
  timer = setTimeout(function(){
    body.classList.remove('disable-hover')
  },500);
}, false);

O que ele faz simplesmente é adicionar a class "disable-hover" ao body da nossa página quando damos um scroll nela!!

Então adicionamos o seguinte CSS para que tudo funcione perfeitamente:
Código:
.disable-hover,
.disable-hover * {
  pointer-events: none !important;
}

Bem simples não é? Mas vejam o ganho de desempenho no vídeo no inicio do tópico!!

Espero que seja útil!!

Fonte: http://www.thecssninja.com/javascript/pointer-events-60fps

http://wagneraugusto.com.br/

Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos