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

Informações:

Autor: Kyo Panda
Versões: Todas as versões
Introdução: Efeito de transição fade-in

Instalação:

Acesse:

Painel de controle ->> Modulos ->> HTML & Javascripts ->> Gestão dos códigos Javascripts

Então crie um novo javascript com investimento em todas as paginas com esse código:

Código:

/**
 * Transição ao Entrar e Sair das Páginas
 * Versão: Todas
 * Autor: Kyo Panda
 */

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);
    });
});

• Resultado: