[TUTORIAL] Efeito de transição fade-in

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Principal Contribuidor
  • 0

[TUTORIAL] Efeito de transição fade-in Empty [TUTORIAL] Efeito de transição fade-in

Mensagem por Shek Sex 11 Jul 2014 - 20:52


[TUTORIAL] Efeito de transição fade-in Config10

Efeito de transição fade-in

Aqui iremos adicionar um efeito de fade-in e rolagem no seu fórum a cada vez que o usuário entra ou sai de uma página. Isso aplica um efeito bacana e uma melhor visibilidade para o usuário saber quando uma outra página está sendo carregada.


--> Tutoriais, dicas e astúcias <--
Efeito de transição fade-in



- Código a ser utilizado:
Código:
/**
 * Transição ao Entrar e Sair das Páginas
 * Versão: Todas
 * Autor: Kyo Panda
 * Site: ajuda.forumeiros.com
 */

var both, hidden, show, speed;

both = {
    'position': 'relative',
    'overflow-x': 'hidden'
};

hidden = {
    'opacity': '0',
    'left' : '200px'
};

show = {
    'opacity': '1',
    'left': '0px'
};

speed = 250;

$('<style>', {
    'type': 'text/css',
    'text': 'body { ' + $.map($.extend(both, hidden), function(value, key) {
        return key + ':' + value;
    }).join(';') + '}'
}).appendTo('head');

$(function() {
    $('body').animate(show, speed);
    $(window).on('beforeunload', function() {
        $('body').animate(hidden, speed);
    });
});


- Aplicando código JS:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>
[TUTORIAL] Efeito de transição fade-in Painel13
[TUTORIAL] Efeito de transição fade-in 110111Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Efeito de transição fade-in 110210Seta Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.
[TUTORIAL] Efeito de transição fade-in 110310Seta Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
[TUTORIAL] Efeito de transição fade-in 110410Seta Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

  • Resultado:
    [TUTORIAL] Efeito de transição fade-in 25tfayp




© Fórum dos Fóruns


[TUTORIAL] Efeito de transição fade-in Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Efeito de transição fade-in
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

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