Fullscreen com jQuery e CSS

Publicado por Renan Martins Pimentel em 23/11/2011

[ Hits: 8.656 ]

Blog: http://www.renanmpimentel.com.br

0 0

Denuncie Favoritos Indicar Impressora

Fullscreen com jQuery e CSS

Fazendo um projeto aqui, surgiu uma coisa um pouco diferente: um site sem menu, apenas usando setas.

Você deve estar pensando que é algo meio confuso ou sem pé nem cabeça. Foi o que pensei, mas depois de ver como ficou, achei uma ideia legal para os famosos Hotsites.

Usando este tutorial, você vai poder mostrar para o seu cliente, uma forma diferente dele mostrar o seu produto.

O esboço usado aqui está totalmente cru, ou seja, sem um layout apresentável; mas com um pouco de criatividade vocês podem tudo.

Vamos criar o arquivo 'funcoes.js', onde uma função em jQuery para pegar a altura total da página e uma função que vai fazer toda mágica da transição de 'div' (páginas):

\* PEGAR ALTURA TOTAL DA PAGINA *\ $(document).ready(function(){ var altura = $(document).height(); $(".alturaTotal").height(altura); }); $(function() { function slidePanel( newPanel, direction ) { \\ define the offset of the slider obj, vis a vis the document var offsetLeft = $slider.offset().left; \\ offset required to hide the content off to the left \ right var hideLeft = -1 * ( offsetLeft + $slider.width() ); var hideRight = $(window).width() - offsetLeft; \\ change the current \ next positions based on the direction of the animation if ( direction == 'esquerda' ) { currPos = hideLeft; nextPos = hideRight; } else { currPos = hideRight; nextPos = hideLeft; } \\ slide out the current panel, then remove the active class $slider.children('.paginas-total.ativa').animate({ left: currPos }, 10, function() { $(this).removeClass('ativa'); }); \\ slide in the next panel after adding the active class $( $sliderPanels[newPanel] ).css('esquerda', nextPos).addClass('ativa').animate({ left: 0 }, 10 ); } var $slider = $('#fundo-total'); var $sliderPanels = $slider.children('.paginas-total'); var $navWrap = $('<div id="fundo-total-setas"><\div>').appendTo( $slider ); var $navLeft = $('<div id="fundo-total-setas-esquerda"><\div>').appendTo( $navWrap ); var $navRight = $('<div id="fundo-total-setas-direita"><\div>').appendTo( $navWrap ); var currPanel = 0; $navLeft.click(function() { currPanel--; \\ check if the new panel value is too small if ( currPanel < 0 ) currPanel = $sliderPanels.length - 1; slidePanel(currPanel, 'direita'); }); $navRight.click(function() { currPanel++; \\ check if the new panel value is too big if ( currPanel >= $sliderPanels.length ) currPanel = 0; slidePanel(currPanel, 'esquerda'); }); }); \* PEGAR ALTURA TOTAL DA PAGINA *\

Agora vamos criar o arquivo css.css, que vai auxiliar o funcoes.js e dar uma "cara" pro nosso site:

@charset "utf-8"; \* CSS Document *\ \*RESETAR O CSS*\ *{ margin:0px; padding:0px; } #conteudo { overflow: hidden; } #fundo-total { position: relative; width: 100%; margin: 0 auto; } #fundo-total .paginas-total { position: absolute; top: 0; left: 0; width: 100%; height:100%; visibility: hidden; } #fundo-total .paginas-total.ativa { visibility: visible; } #fundo-total-setas { position: absolute; top: 0; right: 0; height:350px; left:50%; margin:-175px 0 0 -450px; top:50%; width:900px } #fundo-total-setas-esquerda{ display: inline-block; height: 0; width: 0; cursor: pointer; position:absolute; left:-50px; top:142px; z-index:9999; } #fundo-total-setas-direita { display: inline-block; height: 0; width: 0; cursor: pointer; position:absolute; right:-50px; top:142px; z-index:9999; } #fundo-total-setas-esquerda { background:url(seta-esq.png) top center no-repeat; width:64px; height:64px; } #fundo-total-setas-direita { background:url(seta-dir.png) top center no-repeat; width:64px; height:64px; } \* IMAGEM DE FUNDO DE CADA PAGINA *\ #fundo-total .fundo01 {background: url(images\fotos1.jpg) no-repeat center center fixed;} #fundo-total .fundo02 {background: url(images\fotos2.jpg) no-repeat center center fixed;} #fundo-total .fundo03 {background: url(images\fotos3.jpg) no-repeat center center fixed;} #fundo-total .fundo04 {background: url(images\fotos4.jpg) no-repeat center center fixed;} #fundo-total .fundo05 {background: url(images\fotos5.jpg) no-repeat center center fixed;} #fundo-total .fundo06 {background: url(images\fotos6.jpg) no-repeat center center fixed;} \* IMAGEM DE FUNDO DE CADA PAGINA *\ \* FAZER TODAS PAGINAS FULLSCREEN *\ #fundo-total .fundo01, #fundo-total .fundo02, #fundo-total .fundo03, #fundo-total .fundo04, #fundo-total .fundo05, #fundo-total .fundo06{ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } \* FAZER TODAS PAGINAS FULLSCREEN *\

E por final, vamos unir os dois arquivos no HTML e ver como fica:

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text\html; charset=utf-8"> <title>Imagem FullScreen \ Mudar de Páginas<\title> <link rel="stylesheet" type="text\css" href="css.css"> <script type="text\javascript" src="https:\\ajax.googleapis.com\ajax\libs\jquery\1.7.0\jquery.min.js"><\script> <script type="text\javascript" src="funcoes.js"><\script> <\head> <body> <div id="fundo-total" class="alturaTotal"> <div class="paginas-total fundo01 ativa"> <\div> <div class="paginas-total fundo02"> <\div> <div class="paginas-total fundo03"> <\div> <div class="paginas-total fundo04"> <\div> <div class="paginas-total fundo05"> <\div> <div class="paginas-total fundo06"> <\div> <\div> <\body> <\html>

Demostração online:

www.renanmpimentel.com.br/exemplos/fullscreen

Previamente publicado em:

www.renanmpimentel.com.br - Fullscreen com jQuery e CSS

Outras dicas deste autor

Mostrar a previsão do tempo com PHP

Cadastrar eventos/compromissos no Google Agenda com cURL [PHP]

Verificar se o CPF é válido

Gerando QR Code com PHP

Autenticação e criptografia de senhas usando PHP

Leitura recomendada

Extensões (Webmaster) do Firefox

Framework Javascript

HTML - Forçar a abertura de todos os links em uma nova janela

Incentivando o uso do Webm, formato aberto de "codec" (conteiner) de vídeo

Editor de HTML5 em tempo real

Comentários

[1] Comentário enviado por nickmarinho em 24/11/2011 - 08:06h

Muito bom isso.
Estou trabalhando com umas coisas danadas com CSS e jQuery e estou usando dataTables e Flexi Gridi, a coisa pega viu ?!

Ficou bacana seu exemplo.
Parabéns !

0 0

[2] Comentário enviado por renanmpimentel em 24/11/2011 - 09:09h

Valeu cara, eu estou estudando forte CSS3, daqui a pouco espero colocar umas dicas aqui.

Obrigado pelo parabéns.
Abraços!

0 0