Transição de página [in]

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

Resolvido Transição de página [in]

Mensagem por Bookmarlucas654 em 28/07/14, 05:47 pm


  • Descrição:

Bom, recentemente foi lançado o pacotão com 50 tutoriais. Um deles(assim como diversos outros) me chamaram atenção. Atualmente, estou utilizando este código:

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' : '0px'
};

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

speed = 50;

$('<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);
    });
});

Fiz pequenas alterações nele, como quem usa pode perceber. Mas, eu queria acrescentar um efeito. Quando estamos prestes a visitar outra página, o fórum começa a sumir, deixando apenas o fundo, até que se carregue(normal do código, esse foi o objetivo dele).

Mas... queria acrescentar mais um detalhe. No caso, ao aparecer a página, queria que aparecesse tão lentamente quanto quando some. Ou seja, ter o mesmo efeito quando finaliza o carregamento também.

Isso é possível? Agradeço desde já!



  • Informações:




Fórum:http://habbojoy.clubme.net/forumVersão:PHPBB3
Tipo:Pedido de códigoTags:Transição,página



Última edição por Bookmarlucas654 em 28/07/14, 09:29 pm, editado 1 vez(es)
avatar

Bookmarlucas654
Usuário destaque

Masculino
Inscrito dia : 13/01/2012
Mensagens : 579
Pontos Ativos : 833

Ver perfil do usuário https://interessesdoreino.forumeiros.com

Resolvido Re: Transição de página [in]

Mensagem por Alex Habilidade em 28/07/14, 09:24 pm

Olá, troque por este:
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' : '0px'
};

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

speed = 1000;

$('<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);
    });
});
avatar

Alex Habilidade
Usuário experiente

Masculino
Inscrito dia : 10/01/2011
Mensagens : 2795
Pontos Ativos : 3774

Ver perfil do usuário http://www.gzhabilidade.com/

Resolvido Re: Transição de página [in]

Mensagem por Bookmarlucas654 em 28/07/14, 09:29 pm

PERFEITO!
Muito obrigado colega. Ficou totalmente perfeito! =D
avatar

Bookmarlucas654
Usuário destaque

Masculino
Inscrito dia : 13/01/2012
Mensagens : 579
Pontos Ativos : 833

Ver perfil do usuário https://interessesdoreino.forumeiros.com

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