Uma ótima maneira de atrair a atenção de um visitante para o seu site é uma "tela inicial" ou uma "tela de introdução". No entanto, fazer um sucesso é muito difícil por uma simples razão: os ecrãs iniciais irritam facilmente os utilizadores.
As telas iniciais podem funcionar se aparecerem rapidamente e são facilmente descartáveis. Eles podem ser visualmente impressionantes e bonitos e fazer o usuário querer rolar para aprender mais. Esse estilo de intros funciona muito bem em sites de rolagem de página única. Ou o 'estilo de banner' do webdesign que entrou na moda com a tendência de design plano. Também pode ser muito útil fazer um belo estilo de introdução ao vídeo “background video”, que também é muito popular no momento.
O que eu quero mostrar a você hoje é um método básico para alcançar esse efeito, que você pode modificar facilmente para fazer intros de boa aparência em experiências na web.
Se você gostaria de ver o que estamos construindo, há uma demonstração aqui. E você pode baixe todos os arquivos de origem aqui.
A marcação
Nós vamos tentar manter a marcação para isso muito simples. Dessa forma, ele pode ser implementado em sites pré-existentes, bem como em novos projetos.
Então, basicamente, o que queremos fazer é dois divs. Um com uma classe de splash e outro com uma classe de wrapper . (A classe wrapper pode já existir de alguma forma para você, se você estiver implementando isso em um site pré-existente, portanto, pode ser necessário variar o nome dessa classe).
É isso aí. Isso é tudo que precisamos semanticamente. Mas, obviamente, adicionaremos algum conteúdo e títulos fictícios para que tenhamos algo para ver em nossa demonstração. Também precisaremos de algum tipo de seta para adicionar na tela inicial para mostrar ao usuário que ele pode rolar para baixo (já que este será o nosso método para fazer a tela de introdução desaparecer e trazer o conteúdo principal).
Então aqui está a simples marcação de tudo dentro da nossa tag corporal :
Lorem ipsum dolor sente-se amet, consectetur adipisicing elit. Dolor, veludo, sapiente, faceira, tempora, ullam, accusamus, minus laborum, porro, odit, sequi dolorum, enim, optio, alias, nulla, laudantium, voluptatibus, quibusdam, quaerat, provident, eius, quo, peridendis, voluptatem, pariatur, mollitia, eveniet, molestias, debitis, quia! Natus, minima, error, porro facere cum perferendis consequatur necessitatibus id sapiente soluture veritatis magnam quasi ut cumque provident quidem nemo enim nesciunt nihil architecto in obcaecati nobis quam tenetur corrupti. Error, soluta autem consequatur mollitia dolorem seqüión iust dolore fuga facilis esse illum accusamus ratione earum quasi ipsa doloribus odio. Arquiteto, natus fuga non perferendis veritatis nihil repellat dolorum rerum quidem
Então, vamos explicar o que está acontecendo aqui com mais detalhes: começamos com nosso splash div. Dentro disso temos um título e nosso indicador de rolagem (que aqui é uma imagem de seta, mas pode ser qualquer coisa que você queira que seja obviamente). Então fechamos essa div e abrimos outra com uma classe de wrapper . Por dentro, acabamos de obter algum conteúdo de site genérico que será diferente para cada caso, mas aqui vamos mantê-lo simples: um título, alguma navegação, uma área de conteúdo principal e um rodapé. Então, o jQuery é incluído na API do Google, pois iremos utilizá-lo para funcionalidade e, finalmente, vinculamos a outro arquivo .js, que é o nosso, no qual estaremos escrevendo nosso código jQuery.
Você também pode perceber o nome da classe fade-in na área da tela inicial. Usaremos essa classe para adicionar animações CSS3 a certos elementos e tornar a introdução mais poderosa. Obviamente, se você olhar os resultados agora, não será realmente nada, precisamos modelar tudo agora. Falando nisso, vamos entrar no CSS…
Styling
Mais uma vez, vamos tentar manter os estilos simples e úteis. Isso é tudo CSS simples. Primeiro de tudo, vamos começar com o nome da classe .fade-in. (Isso deve ser declarado no topo do nosso arquivo CSS, para que possamos declarar diferentes tempos de atraso de animação em outros elementos mais abaixo.)
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }.fade-in {opacity:0;-webkit-animation:fadeIn ease-in 1;-moz-animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:0.3s;-moz-animation-duration:0.3s;animation-duration:0.3s;-webkit-animation-delay: 0.5s;-moz-animation-delay: 0.5s;animation-delay: 0.5s;}
Estamos declarando os keyframes primeiro e chamando nossa animação fadeIn. Ele vai de uma opacidade 0 para 1. Então, direcionamos o nome da classe diretamente, especificando que ele tem 0 opacidade. e chamei a animação que acabamos de especificar, faça-a durar 0.3s e dê um atraso de 0.5s.
Agora vamos ver o CSS necessário para a nossa página inicial:
.splash { background: url('../img/splash-bg.jpg') center center;background-size: cover;background-attachment: fixed;position: fixed;top: 0;right: 0;bottom: 0;left: 0;min-height: 360px;z-index: 999;text-align: center;}
Estamos chamando em uma imagem de fundo (aqui é apenas uma foto em preto e branco de uma rua), que estamos centralizando, também certificando-se de que cobre a tela inteira em qualquer tamanho, e torná-lo ligado, o que significa que é Não vou me mover na rolagem. Em seguida, damos a ela uma posição 'fixa' e especificamos que ela deve estar a uma distância de 0 da parte superior, direita, inferior e esquerda - portanto, ela preenche toda a janela do navegador. Então, daremos uma altura mínima, pois o que colocaremos dentro dela estará absolutamente posicionado. Certifique-se de que ele tenha um z-index alto, pois queremos que ele apareça acima do restante do conteúdo da página (que agora será colocado diretamente abaixo da tela inicial, pois ele tem uma posição fixa).
Lá vai você, são todos os estilos que são realmente necessários para fazer a tela inicial aparecer no lugar certo na página. Preenchendo a tela e acima de qualquer outro conteúdo, sem alterar o fluxo da página. Então, agora eu vou rapidamente te dar o resto do CSS, que coloca o título no lugar certo, adiciona uma boa seta para baixo para indicar que o usuário deve rolar. E finalmente alguns estilos básicos para a página e algumas consultas de mídia:
html, body { width: 100%;height: 100%;}body { font: normal 1em/1.5em 'Open Sans', sans-serif; color: #333; margin-bottom: 20px; }.wrapper {max-width: 1000px;width: 90%;margin: 0 auto;}.splash-title {color: white;font-size: 3em;margin-top: 100px;text-shadow: 0 2px 10px #000;-webkit-animation-delay: 1s;-moz-animation-delay: 1s;animation-delay: 1s;}a.splash-arrow {color: white;font-size: 1.2em;position: absolute;bottom: 55px;left: 50%;margin-left: -25px;padding: 10px;width: 50px;height: 50px;font-weight: bold;-webkit-transition: all 0.1s ease;-moz-transition: all 0.1s ease;-o-transition: all 0.1s ease;transition: all 0.1s ease;-webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;animation-delay: 1.5s;border: 3px solid white;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}a.splash-arrow:hover {text-decoration: none;bottom: 50px;}@media all and (max-width: 690px) {header h1 { width: 100%; text-align: center; }header nav { float: none; display: inline-block; margin: 0 auto; }.splash-title {font-size: 2em;}}@media all and (max-width: 480px) {.splash-title {font-size: 1.5em;}}
Então, aqui temos estilos gerais de corpo, alguns top padding no título, onde também atrasamos o fade em animação por meio segundo. Então tem sua própria entrada. O link da seta está absolutamente posicionado, para estar sempre no meio e na parte inferior da tela. Tem outro meio segundo de atraso para aparecer no final da tela. Estamos adicionando algumas transições CSS3 para que as alterações de posição no estado: hover sejam animadas. Finalmente, temos algumas pequenas alterações na consulta de mídia para que pareça um pouco melhor em telas menores. Mas obviamente esses estilos vão mudar de acordo com o seu design.
jQuery
Então, como declaramos anteriormente, vamos criar um arquivo chamado main.js em um diretório js . Dentro disso, escreveremos nosso jQuery, que fará com que a tela inicial desapareça na rolagem ou quando você clicar no link da seta. Aqui está:
$(document).ready(function() {if($(".splash").is(":visible")) {$(".wrapper").css({"opacity":"0"} )}} $ (". splash-arrow"). click (function () {$(".splash").slideUp("800", function() {$(".wrapper").delay(100).animate({"opacity":"1.0"} , 800);});});}); $ (window) .scroll (function () {$(window).off("scroll");$(".splash").slideUp("800", function() {$("html, body").animate({"scrollTop":"0px"} , 100); $ (". Wrapper"). Delay (100) .animate ({"opacidade": "1.0"}, 800);});});
Primeiro de tudo, estamos envolvendo nossas primeiras instruções em uma função pronta para o documento , para agir somente quando a página estiver totalmente carregada. Então, para começar, verificamos se a tela inicial está visível. Se assim for, tornamos o wrapper invisível (por isso não temos flash de conteúdo enquanto a imagem de fundo é carregada, e também para fazer um desvanecimento final da animação quando chegarmos à página). Em seguida, adicionamos uma função ao manipulador de cliques na seta. Então, se o usuário clica nele, a tela inicial desliza para cima (e, portanto, desaparece) e, em seguida, animamos a opacidade do invólucro de volta para 1.
Este pequeno bloco de código é (quase) o mesmo que usaremos logo depois na função $ .scroll . Assim, quando o usuário rola, nós deslizamos para cima o splash, e então, desta vez, animamos de volta ao topo da página (para que o usuário não inicie na metade da página) e animamos a opacidade do elemento wrapper. Nós também adicionamos nessa linha $ (window) .off (“scroll”); que impede a janela de realmente rolar quando não queremos. Quando o usuário rola pela primeira vez, queremos que apenas defina a animação e não role a página. Mas uma vez que a introdução se foi, a página rolará normalmente.
Conclusão
Então você tem isso, uma solução muito simples (leve), mas elegante, para ter uma tela de introdução adicionada ao topo do seu site, e fazê-lo desaparecer na rolagem, ou quando o usuário clica em um elemento específico. Sinta-se à vontade para pegar este código, usá-lo e modificá-lo para atender às suas necessidades.
Como mencionei no começo, essa técnica pode ser usada de várias formas diferentes, então seja criativo!