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: