- Obter link
- Outras aplicações
Quando estava a montar este blogue quis colocar algum tipo de efeito ao se mudar de página ou entrar no blogue, e lembrei-me dum tutorial com jQuery que poderia até ficar bem fixe... se não fosse por um pequeno detalhe... :-`
Mas vou deixar isso para depois. O que importa agora é que hoje vou republicar esse tutorial, que mesmo com esse detalhe ou desvantagem, ainda pode ser útil para alguém... nem que seja como curiosidade. 8)
No artigo a seguir, todo o texto mantém-se praticamente o mesmo, somente actualizei a ligação para o artigo onde mostra como colocar o jQuery no blogue. :)
Artigo publicado originalmente em
11 de Março, 2010
Desta vez este truque é para colocar no blogue todo, já que este efeito fica bem fixe e funciona bem dessa maneira.
Atenção: antes de tentar modificar o código do blogue, é recomendado que salve sempre o modelo actual!
Então, e para começar acho melhor explicar algumas coisas antes:
O jQuery tem vários tipos de efeitos que se podem utilizar para criar animações, ou simplesmente dar aquele efeito fixe a um elemento. Entre esses efeitos existe um chamado fade, que basicamente significa desvanecer. Pode ser fade in em que o efeito é utilizado ao aparecer o elemento ou fade out que se utiliza ao fazer desaparecer o elemento.
Neste efeito que vou explicar como colocar, vou utilizar o fade in para dar um efeito nas paginas do blogger ao carregar cada uma delas, como se fossem aparecendo lentamente...
Assim para colocar o efeito, primeiro é necessário colocar o jQuery no blogue por isso recomendo a leitura do artigo Como colocar jQuery num blogue antes de continuar a ler, caso ainda não tenha essa biblioteca de javascript no blogue.
Depois precisamos de envolver o blogue numa div para que o efeito vá funcionar em todas as paginas. Para fazer isso, primeiro vamos à aba Modelo e depois Editar HTML para abrir o Editor de HTML, onde está toda a codificação presente no blogue e procuramos por:
<body>
Logo por baixo, colocamos o seguinte:
<div id='page_effect' style='display:none;'>
...e claro, precisamos fechar esta div procurando no fim do código por:
</body>
Imediatamente antes, colocamos o fecho da div:
</div>
Salvamos o modelo. Se ir ver o blogue nesta altura, não vai ver nada já que a div que colocamos envolve todo o blogue e conteúdo porque está definida para esconder tudo.
E é agora que entra o jQuery com o efeito fade in que vai fazer cada pagina apareça lentamente ao carregar.
Procuramos por:
</head>
E imediatamente antes, colocamos o seguinte:
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(document).ready(function () {
$('#page_effect').fadeIn(1500);
});
});
//]]>
</script>
Explicando, onde tem o numero 1500 é onde coloca a velocidade a que o efeito acontece. Quanto maior o valor, mais lento é o efeito.
Este efeito pode ser utilizado em qualquer elemento separado bastando para isso que se coloque a ID da div onde está #page_effect no código javascript acima, ou seja pode ser utilizado somente em alguns elementos e não necessariamente em todo o blogue como coloquei aqui neste exemplo.
Por exemplo, suponhamos que só queria colocar o efeito na barra lateral:
Não seria necessário criar a div page_effect, embora eu o recomende porque facilita depois caso se queira alterar alguma coisa, além de dessa maneira se pode colocar em vários elementos separados, utilizando em vez de ID, uma class da seguinte maneira:
<div class='page_effect' style='display:none;'>
Elemento(s) a colocar o efeito
</div>
E, claro que utilizando uma class, precisamos modificar o código javascript também:
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(document).ready(function () {
$('.page_effect').fadeIn(1500);
});
});
//]]>
</script>
Ou seja, se se utilizar div id, estes devem ser únicos, não podem ser repetidos. Só se deve utilizar se só desejarmos colocar o efeito a envolver todo o blogue como explico primeiro ou num único elemento.
Utilizando div class, pode-se colocar em vários elementos à escolha.
Podem ver uma Demonstração do efeito neste blogue de testes envolvendo todo o conteúdo e todas as paginas.
ATENÇÃO: utilizar este efeito envolvendo todo o blogue tem um contra! Se o visitante não tiver o javascript activado NÃO vai conseguir ver nada no blogue. Essa foi uma das razões porque embora eu tenha gostado do efeito, decidi não o aplicar no meu blogue.
E este era o "pequeno detalhe" que mencionei no primeiro paragrafo deste artigo. ~X
Mas... mesmo assim, se repararem consegui colocar um efeito semelhante aqui no blogue mas sem utilizar javascript ou necessitar de mexer muito na codificação. Somente com algumas linhas de CSS, mas essa parte fica para outro artigo. :D
Até Breve. :-F
Comentários
Malta, comentem, tanto críticas como elogios serão bem-vindos. E eu respondo, não prometo quando mas respondo.
Mas antes de comentarem, leiam as minhas Regras dos Comentários.
Se quiserem deixar o link para o vosso sitio, utilizar alguns estilos ou até inserir videos ou imagens nos comentários DEVEM mesmo ler as indicações nas Regras dos Comentários.
Enviar um comentário