Você está usando um navegador desatualizado. Para a visualização correta, atualize seu navegador:

Mapa do site


SimpleUi

Atualizando

Código para Âncora animada Download

? - +
Links animados dentro da mesma página
  1. Use links de âncora normais: <a href="#sua_ancora">ancora</a> e <a name="sua_ancora"></a>
    • O framework implementará animação nas âncoras comuns Html
  2. Para carregar uma âncora animada automaticamente após o carregamento da página: acrescente uma tralha (#) ao final da URL e, em seguida, o name da âncora, da class ou do id, exemplos:
    • http://www.url.com.br#anchorName
    • http://www.url.com.br#meuId
    • http://www.url.com.br#minhaClass
    Ps: qualquer marcação (tag) pode ser usada para ancorar class ou id.
  3. Também é possível ancorar automaticamente uma página quando ela tiver parâmetros (qualquer parâmetro)
    • Para isso, use a classe ui_anchorPoint em algum elemento
    • Esse elemento será ancorado sempre que a página tiver parâmetros (útil para páginas de pesquisa que usam método GET)
  1. Para alguns projetos, há a necessidade de considerar barras fixas presas ao topo do layout
    • Trata-se de um caso específico, para isso, altere a varíavel f_topBar no core do framework.
  2. Após a animação de ancoragem, usuários avançados podem implementar uma função do tipo callback
    • Para isso, crie a função callback_anchor(obj) e implemente as ações que irão ocorrer após a animação
    • Onde obj é o objeto ancorado.
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
  3. Também está disponível uma função para ancorar objetos manualmente
    • Para isso, use anchor(elem) em qualquer ação ou evento
    • Onde elem é o seletor de um objeto, exemplo: "#meuElemento" ou ".meuElemento" (também pode ser um objeto, como $(objeto)).
    • Caso necessário, ancorar conta com uma função callback_anchored(obj) para implementar ações que irão ocorrer após a animação
    • Onde obj é o objeto ancorado.
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
Customizar


Comportamento

Uma vez habilitada, a função trata todas as âncoras Html para animar o link, até então estático. Dessa maneira, as marcações Html permanecem preservadas. A interação, por sua vez, é enriquecida para melhorar a experiência e a percepção de transição de movimento entre os pontos.

Padrão inicial

após carregar a página. Saiba mais
Uma URL pode ancorar para um ponto qualquer na página. Para isso, basta que ao final da URL exista uma tralha (#) com o name de uma âncora simples, uma class ou um id, exemplos:
  • http://www.url.com.br#ancoraName
  • http://www.url.com.br#meuId
  • http://www.url.com.br#minhaClass
PS: qualquer marcação (tag) pode ser usada para ancorar class ou id.
Após marcar essa opção, visualize a nova URL na barra de endereço do seu navegador e Carregue a nova página para simular efeito.
Tem certeza que deseja reiniciar todos os valores?

Resultado para Âncora animada