Site Âncora Simples com Efeito Animate do JQuery

Site Âncora Simples com Efeito Animate do JQuery

Publicado em 21 ago 2014

Simplicidade e rico em efeitos os sites com âncoras no menu para redirecionar para sessões especificas de uma página são uma ótima opção para hotsite de produtos e eventos, abaixo disponibilizo um script simples de implementar e com todos os efeitos disponíveis com a função animate do JQuery.

Primeiramente você deve inserir a biblioteca JQuery, você pode fazer download no site do JQuery ou então utilizar a base do Google

No head do seu site ou onde preferir você insere o script abaixo, nos comentários do script inseri todos os efeitos animate para substituir no final da linha de código onde o efeito ‘easeInOutExpo’ já esta alocado.

$(function() {
	$('a').bind('click',function(event){
		var $anchor = $(this);
        
		  $('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top}, 1000,'easeInOutExpo');

	// Outras Animações
	// linear, swing, jswing, easeInQuad, easeInCubic, easeInQuart, easeInQuint, easeInSine, easeInExpo, easeInCirc, easeInElastic, easeInBack, easeInBounce, easeOutQuad, easeOutCubic, easeOutQuart, easeOutQuint, easeOutSine, easeOutExpo, easeOutCirc, easeOutElastic, easeOutBack, easeOutBounce, easeInOutQuad, easeInOutCubic, easeInOutQuart, easeInOutQuint, easeInOutSine, easeInOutExpo, easeInOutCirc, easeInOutElastic, easeInOutBack, easeInOutBounce


		});
	});

Para o html você pode seguir esta estrutura, link com a hashtag e o id na sessão onde quer que a página deslize

Link 1
Link 2

 

 

 

Pronto é isso! Simples e fácil. Agora você já tem uma navegação em uma única página e com diversos efeitos de deslize para se chegar ao conteúdo.

Gostou desse artigo? Dá uma forcinha!
A única forma que consigo remunerar meu site é através de anúncios, não esqueça de conferir!




Deixe o seu comentário