Com a mudança dos costumes dos usuários, que já imaginam que uma página deve ter rolagem na vertical, os desenvolvedores podem aproveitar a altura da tela para fazer banners mais elaborados e bonitos. Para isso podemos utilizar as Vieport Units Veja Post Sobre para que o seu CSS reconheça a altura do banner de maneira mais fácil e acertada.
Vamos ao exemplo, no cabeçalho do HTML insira os códigos para utilização do jQuery e do Cycle, um plugin para desenvolvimento e configuração de banners:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
Dentro do HTML vou adicionar uma DIV com a classe do cycle responsável pelas animações:
<div id="banner" class="cycle-slideshow" data-cycle-slides="> div">
<div id="b1">
<span>
<h1>Venha para o Paraíso!</h1>
<p>Venha desfrutar das praias paradisíacas do Nordeste brasileiro!</p>
</span>
</div>
<div id="b2">
<span>
<h1>Venha Repousar na Tranquilidade!</h1>
<p>A Tranquilidade do campo pertinho de Você!</p>
</span>
</div>
</div>
O data-cycle-slides diz ao cycle que a animação não será realizada nas imagens, como padrão, mas sim nas DIVS, isto é, a animação será realizada na DIV com o seu contedo. Dentro desta adicionei um span com outros elementos para formatar e deixar o banner mais bonito.
Cada div possui um id, pois irei adicionar imagens de fundo e iremos configurar para que fique fixas, gerando aquele efeito parallax quando a página rolar.
No head do html irei inserir uma fonte do Google Fonts e o Style do CSS:
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
}
p {
font: 2em Raleway;
text-align: center;
margin: 10px;
}
#banner, #banner div {
width: 100%;
height: 100vh;;
}
#banner span {
width: 100%;
text-align: center;
font-family: Raleway;
color: #FFF;
text-shadow: 1px 1px 1px #000;
position: absolute;
z-index: 100;
top: 40vh;
}
#banner span h1 {
font-size: 5em;
}
#banner span p {
font-size: 2.5em;
}
#b1 {
background: url(http://travelchannel.sndimg.com/content/dam/images/travel/fullset/2015/08/03/top-florida-beaches/siesta-key-beach-florida.jpg.rend.tccom.1280.960.jpeg) fixed center;
}
#b2 {
background: url(https://i.ytimg.com/vi/c7oV1T2j5mc/maxresdefault.jpg) fixed center;
}
#b1, #b2 {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
As imagens de exemplo foram encontradas no Google.
No height do #banner utilizei a altura 100vh para que ele atinja a altura do dispositivo, ficando assim com 100% da altura da tela.
O position e o z-index utilizados no span servem para posicionar o objeto na tela e acima da animação criada pelo Cycle2.
Na configuração do #b1 e #b2 utilizamos o background-size para que a imagem se ajuste a tela (cover), aumentando ou diminuindo dependendo do tamanho da tela do dispositivo.