Fullscreen com jQuery e CSS

Publicado por Renan Martins Pimentel em 23/11/2011

[ Hits: 7.338 ]

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

 


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:
Previamente publicado em:
Outras dicas deste autor

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

Upload de várias imagens com PHP e jQuery

Autenticação e criptografia de senhas usando PHP

Verificar se o CPF é válido

Gerando QR Code com PHP

Leitura recomendada

Efetuando debug de JavaScript no Mozilla

Upload de múltiplos arquivos com Javascript + Flash

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

Palheta de cores utilizando Json e Javascript não obstrutivo

Resolvendo erro de atualização do firmware do modem DSL2640t

  

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 !

[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!



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts