No tutorial de hoje vou mostrar a você, como criar um animado cenário surpreendente

Criando um cenário Dia e Noite: de animação com jQuery e CSS

de origem Download

No tutorial de hoje vou mostrar a você, como criar um animado cenário surpreendente , com apenas algumas linhas de jQuery e alguns elementos com posicionamento absoluto com as imagens.

Veja o link demo e confira o resultado. A animação tem cerca de 30 segundos, para sentar-se e divirta-se!

Por favor note que este não irá funcionar em qualquer versão do IE. Não é porque não é possível, eu simplesmente não tenho tempo e energia para isso. Eu estava tentando conserta-lo, pelo menos, para o IE 8, mas você sabe, quando a codificação começa a ficar feio por causa da "fixação" que para o IE, às vezes eu perco minha paciência. Hoje foi um dia destes (eu aposto que todos eles têm), onde você diz: Darwin, I Ching ... IE tem que morrer (e não só IE6), não, toda a linha!

Ok, vamos começar com a codificação.

1. O HTML

O HTML consiste na divs que terão como cenário imagens de fundo. Assim, teremos o céu, o sol, as nuvens, a paisagem, a lua e as estrelas. Teremos também um elemento para a noite e uma estrela cadente:

<div id="sky"></div>
<div id="sun_yellow"></div>
<div id="sun_red"></div>
<div id="clouds"></div>
<div id="ground"></div>
<div id="night"></div>
<div id="stars"></div>
<div id="sstar"></div>
<div id="moon"></div>

A mudança de cor do sol é simulada pelo desvanecimento em um outro sol de vermelho, amarelo, enquanto o sol desaparece.

Mas antes de entrar em detalhes de animação, vamos dar uma olhada no CSS.

2. A CSS

A CSS está muito semelhantes para todos os elementos, pois a maioria deles será esticada sobre a tela. Todos eles têm posicionamento absoluto:

body{
    overflow:hidden;
}
#clouds, #sky, #night, #stars{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
}

Ao ter atributos comuns, podemos especificá-los para todas as classes separadas por vírgula.

#sky{
    background:#fff url(../images/sky.png) repeat-x top left;
    z-index:1;
}

O céu é composto por imagens de uma semi-transparente, com um degradê de azul para branco. Isso dará um efeito muito bonito para o céu.

#sun_yellow{
    position:absolute;
    left:45%;
    top:50%;
    width:150px;
    height:152px;
    background:transparent url(../images/sun.png) no-repeat center center;
    z-index:2;
}
#sun_red{
    position:absolute;
    left:45%;
    top:50%;
    width:150px;
    height:152px;
    background:transparent url(../images/sun2.png) no-repeat center center;
    z-index:2;
    opacity:0;
}

No começo da animação, quando é dia, nós queremos mostrar um sol amarelo. O sol irá se pôr, ou seja, mover para baixo e desaparecer lentamente. Ao mesmo tempo, vai desaparecer no sol vermelho, que vai estar se movendo da mesma maneira. Assim, inicialmente, definir a posição em algum lugar no centro da tela. Então, vamos animar o movimento eo fade out / in efeitos.

#clouds{
    background:transparent url(../images/clouds.png) repeat-x top left;
    z-index:3;
}
#ground{
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
    height:232px;
    background:transparent url(../images/ground.png) repeat-x bottom center;
    z-index:3;
}

As nuvens ea paisagem vai ser repetido porque queremos que os usuários com uma tela maior para ver um cenário completo também. Tente zoom in / out no navegador e você verá que a tela está sempre cheia com as imagens. Desde que definimos o transbordamento do corpo para ser escondido, o usuário nunca terá que se deslocar - ele simplesmente não verá nada que vai além das bordas do navegador.

#night{
    background-color:#000;
    z-index:4;
    opacity:0;
}
#stars{
    bottom:200px;
    background:transparent url(../images/stars.png) repeat bottom center;
    z-index:5;
    opacity:0;
}

A noite vai ser simplesmente uma div esticada sobre toda a tela com uma cor de fundo preto. Vamos fazê-lo aparecer lentamente, definindo sua opacidade superior, portanto, tornando-o menos transparente.

#sstar{
    position:absolute;
    left:40%;
    top:10%;
    width:126px;
    height:80px;
    background:transparent url(../images/shootingstar.png) no-repeat 80px -200px;
    z-index:5;
    opacity:0;
}

A estrela cadente será um elemento especial: a imagem é uma linha inclinada branca simples. Vamos fazê-la aparecer como uma estrela cadente, movendo a sua posição de fundo e sumindo-lo. Por isso, precisamos definir a posição do fundo inicial de 80px na horizontal (xpos) e 200px-verticalmente (ypos). Então, basicamente, queremos colocá-lo no canto externo superior e, em seguida, fazê-la aparecer na zona "visível".

#moon{
    position:absolute;
    left:45%;
    top:60%;
    width:168px;
    height:168px;
    background:transparent url(../images/moon.png) no-repeat center center;
    z-index:6;
    opacity:0;
}

Com o aumento z-índices, que definem que elemento será em cima do outro. Claro, se incluí-los no HTML por conseguinte, teremos o mesmo efeito, mas é sempre melhor ter a certeza de que no CSS. Para todos os elementos que não queremos mostrar desde o início, nós dá um valor de opacidade de 0, portanto, torná-los transparentes.

E essa é a parte CSS. Agora, vamos olhar o JavaScript mágico.

3. O JavaScript

A fim de animar a cor de fundo do céu, vamos usar um plugin jQuery que pode ser encontrado aqui. simplesmente incluí-lo depois que você incluir o script jQuery principal.

Vamos primeiro dar uma olhada em todo o JavaScript que irá definir:

$(function() {
   $('#sun_yellow').animate({'top':'96%','opacity':0.4}, 12000,function(){
       $('#stars').animate({'opacity':1}, 5000,function(){
            $('#moon').animate({'top':'30%','opacity':1}, 5000, function(){
                $('#sstar').animate({'opacity':1}, 300);
                $('#sstar').animate({
                    'backgroundPosition':'0px 0px','top':'15%', 'opacity':0
                }, 500);
            });
       });
   });
   $('#sun_red').animate({'top':'96%','opacity':0.8}, 12000);
   $('#sky').animate({'backgroundColor':'#4F0030'}, 18000);
   $('#clouds').animate({'backgroundPosition':'1000px 0px','opacity':0}, 30000);
   $('#night').animate({'opacity':0.8}, 20000);
});

Na linha 2 e 12-16 nós definir o que deve acontecer ao mesmo tempo. O inteiro representa a última milissegundos, a duração do efeito. O sol amarelo terá 12 segundos para descer e se torne mais transparente, enquanto, ao mesmo tempo, o sol vermelho se torna mais opaco (mas ele se move para baixo, também).

O céu (linha 13) deve levar 18 segundos para mudar a cor de fundo de branco (como se definiu no CSS) para um roxo escuro.

As nuvens (linha 14) vai aparecer para se mover, pois define uma mudança de animação da posição de fundo que leva 30 segundos. Afirmamos também que deve tornar-se transparente no final (de modo que temos um céu claro).

Como queremos que o cenário inteiro para ficar mais escuro, fazemos o cair da noite, aumentando a opacidade da div preto.

Agora, vamos ver o que acontece nas funções que deve começar após o sol se põe (linha 3-10).

Primeiro, queremos que as estrelas lentamente "fade in", definindo a opacidade superior.Após o que aconteceu, queremos que a lua apareça de baixo para o centro de fading polegadas Então, a estrela cadente deve aparecer. Esta simulamos mudando a sua posição de fundo para 0px 0px e deslocá-lo para baixo um pouco. Além disso, para torná-la uma estrela cadente real, nós fazê-la desaparecer muito rapidamente:), definindo a opacidade a 0.

E é isso! Espero que tenham gostado!

de origem Download

creditos: tympanus.net/codrops

 

 

Technorati Marcas: No tutorial,de hoje,vou,mostrar,a você,como,criar,um animado,cenário,surpreendente

• Divulgar no del.icio.us
• Divulgar no Digg
• Adicionar nos Favoritos do Google
• Enviar para o Twitter
• Compartilhar no Facebook
• Compartilhar no Technorati
• Enviar para o MySpace