[TUTORIAL] Efeito de transição fade-in
Página 1 de 1 • Compartilhe
[TUTORIAL] Efeito de transição fade-in
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
Efeito de transição fade-in
1º - 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);
});
});
2º - 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 >>
Título Correspondente ao nome da página JavaScript/jQuery que será criada. |
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. |
Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery. |
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 |
Tópicos semelhantes
» Aplicar efeito "Fade in" e Fade out" em CSS
» Efeito fade in
» Aumentar tempo de transição efeito hover
» Como colocar o efeito fade in na versão phpbb2
» [TUTORIAL] Efeito Dispersão
» Efeito fade in
» Aumentar tempo de transição efeito hover
» Como colocar o efeito fade in na versão phpbb2
» [TUTORIAL] Efeito Dispersão
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos