robsonmoulin@gmail.com
(11) 9.8655-2539

Site Âncora Simples com Efeito Animate do JQuery


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.

publicidade
publicidade
publicidade

Agora que você terminou de ler esse artigo

Que tal visitar nosso portfólio ou conhecer todas as soluções que oferecemos para você.