A pedidos do Ciro Nunes vou fazer uma equivalência (não existe tradução) do artigo do Buildinternet.
OBS: Todos os direitos reservados ao criador do tutorial, estou apenas fazendo sua equivalência para o português e ainda das partes que eu acho necessário.
No artigo fala-se de um tal de IE 6 mais como eu nem sei o que é isso eu pulei.
<head> <script type="text/javascript" src="<a class="linkification-ext" title="Linkification: http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" href="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js">http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> <script src="jquery.easing.1.3.js" type="text/javascript"></script> </head> <body> <div class="leftcurtain"><img src="images/frontcurtain.jpg"/></div> <div class="rightcurtain"><img src="images/frontcurtain.jpg"/></div> <img class="logo" src="images/buildinter.png"/> <a class="rope" href="#"><img src="images/rope.png"/></a> </body>
*{
margin:0;
padding:0;
}
body {
text-align: center;
background: #4f3722 url('images/darkcurtain.jpg') repeat-x;
}
img{
border: none;
}
.leftcurtain{
width: 50%;
height: 495px;
top: 0px;
left: 0px;
position: absolute;
z-index: 2;
}
.rightcurtain{
width: 51%;
height: 495px;
right: 0px;
top: 0px;
position: absolute;
z-index: 3;
}
.rightcurtain img, .leftcurtain img{
width: 100%;
height: 100%;
}
.logo{
margin: 0px auto;
margin-top: 150px;
}
.rope{
position: absolute;
top: -40px;
left: 70%;
z-index: 4;
}
Parando para ir ao banheiro observar como é feito a magia da internet.
Nós temos duas divs, cada uma com sua classe (.leftcurtain and .rightcurtain), ou seja, a cortina do lado esquerdo (LEFT) e a do lado direito (Right), eles estão parados em seus lugares lá. Isso foi feito com CSS usando top, left e com atribuições de posição.
Você pode perceber também que para cada lado da cortina está definido um width, 50% e 51%. Esta diferença de 1% é para compensar algumas arestas que possam aparecer quando a cortina estiver fechada. Para isso colocamos a cortina da direita em cima da esquerda usando o z-index. Com o z-index garantimos que as cortinas fiquem por cima de tudo.
As imagens das cortinas estão em divs com tamanho de 100 % de width e heigth, isso para proporcionar um efeito real de cortinas.
A classe .logo contem o que se esconde atrás das cortinas, é claro que você pode mudar isso, na verdade, você deve.
E finalmente a classe .rope que é a corda. Esta corda fica por cima de tudo, para que possamos fazer o efeito de puxar.
<script type="text/javascript">
$(document).ready(function() {
//por padrão a cortina está fechada
$curtainopen = false;
//quando a pessoa clicar na corda
$(".rope").click(function(){
$(this).blur();
if ($curtainopen == false){
//se a cortina estiver fechada
$(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'60px'}, 2000 );
$(".rightcurtain").stop().animate({width:'60px'},2000 );
//diz que a cortina esta aberta
$curtainopen = true;
} else {
//se a cortina estiver aberta
$(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'50%'}, 2000 );
$(".rightcurtain").stop().animate({width:'51%'}, 2000 );
//diz que a cortina está fechada
$curtainopen = false;
}
return false;
});
});
</script>
Agora está pronto, já pode dar uma olhada, mais observe as considerações. Por padrão as cortinas estão fechadas $curtainopen = false. Usamos o valor desta variável para determinar se a cortina está aberta ou fechada através da declaração de um if .
O outro evento é quando a corda é clicada, que faz com o que a declaração seja executada. Adicionando o blur() nos links e return false para que não redirecione a página para algum lugar.
Se a cortina estiver sendo fechada a corda estará sendo puxada para baixo, reposicionando a corda em top: 0px de top:-40px, com um efeito “bouce” de puxar a corda proporcionado facilmente pelo plugin. Enquanto esta magia acontece, cada cortina é simultaneamente ajustada para uma largura de 60px, que cria um efeito de abertura. Você pode alterar o tempo que demora para abrir / fechar alterando a duração, que por padrão é 2000 ou 2 segundos.
Agora que as cortinas estão abertas, quando a corda é puxada mais uma vez a declaração do IF irá executar a animação de fechamento e que coloca todos os valores em seus valores padrão.
Agora você tem um efeito magnífico de abrir e fechar cortinas, todos nós esperamos que você encontre algo interessante para colocar detrás das cortinas. Este exemplo está feito com largura total, mais você pode alterá-lo. Isso também pode servir de pré-loader para prevenir que o usuário veja o que está atrás das cortinas enquanto carrega.
Como sempre, seus comentários, pensamentos, sonhos e inspirações são apreciados nos comentários abaixo. Eu fiz minha parte, agora faça a sua.
Beijo do #Nerd e até a próxima.
Bacharel em Sistemas de Informação pela Unibrasil, trabalha com web desde 2004, atualmente trabalha na No Zebra Network como desenvolvedor Ruby. Também é Administrador do grupo de jQuery Brasil, e colaborador/idealista do site jQueryBrasil.
sabe dizer se teria como fazer essa abertura de forma automática assim que o conteúdo interno estivesse carregado? Quais as melhores funções para se fazer isso?
@Thiago
Opa, obrigado pelo comentário.
para a cortina abrir automaticamente é só vc fazer isso.
//se a cortina estiver fechada $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'}); $(".leftcurtain").stop().animate({width:'60px'}, 2000 ); $(".rightcurtain").stop().animate({width:'60px'},2000 ); //diz que a cortina esta aberta $curtainopen = true;Você pode colocar isso dentro de uma função e chamar aonde vc quiser.
Por exemplo, como você vai carregar o conteúdo?
Vai ser via ajax?
Se for então quando vc receber a resposta dele vc coloca este código, ou vc criar um função para isso e chama a função.
Valeu por mais essa cara! Muito legal o efeito e a equivalência. ^^
Agora Beijos do #Nerd tá lasca hein?
Cara muito bom esse tutorial,Obrigado.
Boa tarde Ruan!
Gostaria de saber como faço para a cortina abrir automaticamente depois de 2 segundos que a página foi acessada.
E como ficará a mudança?
Obrigado e boa sorte no TCC..rs
Opa vlw.
Para fazer isso é bem simples basta adicionar no seu javascript:
setTimeOut(function(){$(".rope").click();},2000);Muito legal cara. Fácil de entender, código bom, limpo.
Ainda sou mirim na programção, mas um codigo limpo sempre facilita o entendimento. Fato.
Grande abraço e parabéns pelo tutorial.
Seguindo a pergunta do Thiago Santos, eu tenho uma pagina que esta rodando php e css, como que eu faço para assi que carregar as fotos e codigos a cortina abrir automaticamente?
qual a funcção a ser usada?
Reginaldo, a mesma resposta que eu dei para ele serve para você. Só não esqueça de colocar no
$(document).ready();Opa, obrigadão Juarez. Cara o beijinho é só para as meninas.