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

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

  • 0

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

Mensagem por Shek em 11/07/14, 04:52 pm



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 >>
Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Seta 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.
Seta Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
Seta 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:




© Fórum dos Fóruns


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
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17252
Pontos Ativos : 21490

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum