Construa uma página de pouso animada de tela dividida

Sua página de destino é um elemento crucial no seu layout do site . É a primeira oportunidade real que você tem que apresentar sua empresa, ou o produto que você vende, então seu design é fundamental. As páginas de destino são projetadas com um único objetivo focado conhecido como chamada à ação (CTA). O uso de cores e imagens para complementar as chamadas à ação e experiência de usuário é uma obrigação.

• Veja o Codepen de Trabalho para este tutorial

Neste tutorial, vamos percorrer como construir uma página de pouso envolvente para uma marca de moda fictícia. Ele será centrado em torno de um design de tela dividida com imagens grandes e transições animadas que acontecem no Hover. Esta página terá duas chamadas claras para os botões de ação e estaremos usando HTML, Sass. Para estilo e um toque de baunilha javascript que usa a sintaxe ES6 (lembre-se de garantir que você hospedagem na web. é adequado para as necessidades do seu site). Muito complexo? Crie um site sem a necessidade de código, tente um simples Construtor de sites .

01. Prepare-se

Se você estiver usando o Cdepen, verifique se o CSS está definido como 'SCSS' nas configurações da caneta. Você pode fazer essa alteração clicando na guia Configurações, escolha 'CSS' e altere o pré-processador CSS para SCSs nas opções suspensas.

Então podemos começar a adicionar nosso HTML. Vamos envolver uma seção chamada "esquerda" e uma seção chamada "direita" dentro de uma classe de contêineres, com ambas as seções dadas uma classe de 'tela'.

 & lt; div classe = "contêiner" & gt;
  & lt; section class = "screen esquerda" & gt;
  & lt; / seção & gt;
  & lt; section class = "screen direita" & gt;
  & lt; / seção & gt;
& lt; / div & gt; 

02. Termine o HTML

Para finalizar nosso HTML, adicionaremos um título para cada seção usando um H1. marcação. Por baixo de que precisaremos adicionar um botão, o que ligaria a outra página se este fosse um projeto do mundo real. Vamos dar uma classe de botão Para manter as coisas legais e simples.

 & lt; div classe = "contêiner" & gt;
   & lt; section class = "screen esquerda" & gt;
    & lt; H1 & GT; Mens moda e lt; / h1 & gt;
      & lt; botão & gt;
       & lt; a href = "#" classe = "botão" & gt; aprenda mais e lt; / a & gt;
      & lt; / botão & gt;
    & lt; / seção & gt;

    & lt; section class = "screen direita" & gt;
       & lt; h1 & gt; moda feminina & lt; / h1 & gt;
        & lt; botão & gt;
          & lt; a href = "#" classe = "botão" & gt; aprenda mais e lt; / a & gt;
        & lt; / botão & gt;
     & lt; / seção & gt; 

03. Explorar variáveis ​​de sass

A única coisa que todos nós amamos sobre sass é o uso de variáveis. Mesmo que as variáveis ​​nativas CSS estejam recebendo mais apoio, mantemos as coisas seguras usando o SASS. Nós vamos colocá-los no topo do nosso .scss. e você pode escolher quaisquer cores que você quiser, mas usando RGBA. Os valores nos darão mais flexibilidade.

 / ** variáveis ​​** /

$ contenter-bgcolor: # 444;
$ left-bgcolor: RGBA (136, 226, 247, 0,7);
$ left-button-hover: RGBA (94, 226, 247, 0,7);
$ direito-bgcolor: RGBA (227, 140, 219, 0,8);
$ Button-Button-Hover: RGBA (255, 140, 219, 0,7);
$ Hover-largura: 75%;
$ largura pequena: 25%;
$ animaçãopeed: 1000ms; 

04. Ajuste o estilo do corpo

Em primeiro lugar, limparemos todo o preenchimento padrão e margem para o corpo e, em seguida, definir a família da fonte para abrir o SANS. Isso afetará apenas o botão, então não importa muito a fonte que usamos. Então vamos definir a largura e altura para 100% e certifique-se de que qualquer coisa que transborda no eixo X fica escondida.

 HTML, corpo {
  preenchimento: 0;
  Margem: 0;
  Font-família: 'Abra's', Sans-Serif;
  Largura: 100%;
  Altura: 100%;
  transbordamento-x: oculto;
} 

05. Estilo os títulos da seção

É hora de escolher uma fonte do Google para os títulos da seção - nós escolhemos a exibição do Playfair. Então usando translatex. Podemos garantir que os títulos da seção estejam sempre centrados no eixo X.

 H1 {
  Tamanho da fonte: 5rem;
  cor: #fff;
  Posição: Absoluto;
  Esquerda: 50%;
  Top: 20%;
  Transform: TranslateX (-50%);
  Branco-espaço: Nowrap;

  Font-família: 'PlayFair Display', Serif;
} 

06. Faça os CTAs se destacarem

Nossos botões atuarão como nossas chamadas para a ação, então essas precisam ser grandes, ousadas e posicionadas onde elas são fáceis de clicar. Ambos os botões terão uma fronteira branca e um efeito de transição interessante. Os estilos padrão para ambos os botões serão os mesmos, no entanto, vamos mudar suas cores no Hover.

 .button {
  Exibir: bloco;
  Posição: Absoluto;
  Esquerda: 50%;
  Topo: 50%;
  Altura: 2.6rem;
  Padding-top: 1.2rem;
  Largura: 15Rem;
  Alinhamento de texto: centro;
  cor branca;
  Fronteira: 3px sólido #fff;
  raio de fronteira: 4px;
  Peso de fonte: 600;
  Text-Transform: maiúsculas;
  Decoração de texto: nenhuma;
  Transform: TranslateX (-50%);
  Transição: Todos .2s; 

Os principais botões terão um bom efeito de hover simples e usaremos as variáveis ​​do sass que especificamos para a cor, que serão uma cor semelhante ao fundo da página.

 .Screen.Left .button: pairar {
  fundo-cor: $ left-button-hover;
  Cor fronteira: $ para o botão esquerdo-hover;
}

.Screen.Right .Button: pairar {
  fundo-cor: $ botão direito-hover;
  Cor da fronteira: $ para o botão direito-hover; 

07. Defina o fundo e as telas do recipiente

A classe de contêiner funcionará como nosso wrapper de página e vamos definir a posição disso para parente, simplesmente porque queremos posicionar as telas para o posicionamento absoluto. Vamos dar ao contêiner uma cor de fundo padrão, mas é claro que isso não será visto porque estaremos estabelecendo cores diferentes para ambos os fundos da tela.

 .container {
  Posição: Relativo;
  Largura: 100%;
  Altura: 100%;
  Fundo: $ contenter-bgcolor;
  
    .tela {
      Posição: Absoluto;
      Largura: 50%;
      Altura: 100%;
      estouro: oculto;
    }
} 

08. Adicione imagens de fundo

Ambas as seções esquerda e direita exibirão uma imagem, e você pode encontrar imagens royalty-free de websites como Unsplash. , Pixabay. ou Pexéis. (que eu usei neste tutorial). Para facilitar as coisas, usei um serviço gratuito de hospedagem e compartilhamento de imagens chamado IMGBB que podemos vincular em nosso CSS.

 .screen.left {
  Esquerda: 0;
  Baseia: URL ('https://preview.ibb.co/cpabrm/pexels_photo_450212_1.jpg') Centro de centro sem repetição;
  Fundo de tamanho: capa;
  
    & amp;: antes de {
       Posição: Absoluto;
      contente: "";
      Largura: 100%;
      Altura: 100%;
      Fundo: $ left-bgcolor;
    }
} 

O lado direito da página também exibirá uma imagem de fundo usando IMGBB, e nós definiremos a cor de fundo para rosa. Mais uma vez, colocamos o tamanho do fundo para cobrir . Isso nos permitirá cobrir todo o elemento contendo, que no nosso caso é o .tela aula.

 .Screen.Right {
  Direita: 0;
  Antecedente: URL ('https://preview.ibb.co/mtopcr/seth_doyle_82563_1.jpg') Centro de centro sem repetição;
  Fundo de tamanho: capa;
  
   & amp;: antes de {
      Posição: Absoluto;
      contente: "";
      Largura: 100%;
      Altura: 100%;
      Fundo: $ direito-bgcolor;
    }
} 

09. Adicionar transições e efeitos de hover

A velocidade de animação para o nosso efeito de foco em ambas as telas será controlada por uma transição que mantém o valor de nossa variável $ animatspeed. , que é 1000ms (um segundo). Em seguida, terminaremos dando a animação alguma facilitação, o que é uma facilidade para dentro e fora que ajudará a nos dar uma animação mais suave.

 .Screen.Left ,.Screen.Right, .screen.Right: antes, screen.left: antes de {
  Transição: $ animaçãopeed All Ease-in-out;
} 

O que queremos acontecer agora é que quando você passa o passar da tela esquerda, haverá uma classe adicionada a essa seção usando JavaScript (que escreveremos em uma etapa posterior). Quando esta classe é adicionada, essa tela se estenderá para qualquer largura da variável que especificamos - que serão 75%, e então o lado direito será definido para a variável de largura menor (25%).

 .Hover-esquerdo .left {
  Largura: $ Hover-Largura;
}

.Ver-esquerdo. Certo {
  Largura: $ largura pequena;
}
.Ver-esquerdo. Certo: antes de {
  Z-index: 2;
} 

Isso funciona exatamente o mesmo que o lado esquerdo, onde uma nova classe será adicionada no mouse pair usando JavaScript, e a tela direita se estenderá em conformidade. Também precisamos garantir que o z-index. está configurado para 2. então o botão CTA se torna mais proeminente.

 .Ver-direito.
  Largura: $ Hover-Largura;
}

.Hover-direito .left {
  Largura: $ largura pequena;
}

.Hover-direito .left: antes de {
  Z-index: 2;
} 

10. Mova-se para o Javascript

Vamos usar um toque de Vanilla Javascript para nos ajudar a adicionar e remover aulas CSS e também estaremos usando alguns dos novos recursos ES6. A primeira coisa que precisamos fazer é declarar algumas variáveis ​​constantes.

Porque nós estaremos usando documento Mais de uma vez, vamos definir uma variável constante chamada documento e guarde o documento dentro de que, para que possamos manter a palavra "documento" agradável e curto.

 const doc = documento; 

Agora precisamos definir mais três constantes que vão armazenar o .direita , .deixou e .recipiente seletores. A razão pela qual estamos usando constantes é porque sabemos que não queremos mudar o valor destes, então usar uma constante faz sentido. Com estes agora definidos, podemos ir em frente e adicionar alguns eventos do mouse para eles.

 const direita = doc.queryselector (". Certo");
const esquerda = doc.queryselector (". Esquerda");
contêiner conster = doc.queryselector (". Contêiner"); 

Usando o. deixou Variável constante Nós declaramos no último passo, agora podemos adicionar um ouvinte de eventos a ele. Este evento será o mouseenter. evento e em vez de usar uma função de retorno de chamada, usaremos outro recurso ES6 chamado Funções de seta '(() = & gt;) .

 // Adiciona uma classe ao elemento do contêiner no pairo
esquerda.addeventlistener ("mouseenter", () = & gt; {
  contêiner.classlist.add ("" hover-esquerdo ");
}); 

11. Adicione e remova uma aula

No último passo, nosso ouvinte de eventos adicionou um mouseenter. evento que segmenta a classe de contêiner principal e adiciona uma nova classe chamada Hover-left. para o elemento da seção esquerda. Com este chamado adicionado, agora precisamos removê-lo quando passaremos. Vamos fazer isso usando o Mousele Treeze. evento e o. .retirar() método.

 // remove a classe que foi adicionada no pairo
esquerda.addeventlistener ("Mouseleesse", () = & gt; {
  contêiner.classlist.remove ("Hover-left");
}); 

Até agora fizemos tudo na tela da esquerda. Agora vamos terminar o JavaScript e adicionar e remover as aulas nos elementos da seção direita. Mais uma vez, usamos a sintaxe da função de seta aqui para manter tudo bonito e arrumado.

 direito.addeventlistener ("mouseenter", () = & gt; {
  contêiner.classlist.add ("Hover-Right");
});

direito.addeventlistener ("mouseleesse", () = & gt; {
  contêiner.classlist.remove ("Hover-Right");
}); 

12. Faça responsivo

Nenhum projeto - não importa quão grande ou pequeno - deve evitar ser responsivo. Então, nesta etapa, adicionaremos algumas consultas de mídia ao nosso CSS e tornaremos este pequeno projeto tão adaptativo aos dispositivos móveis da melhor maneira possível. Vale a pena conferir o codepen original para ver como isso funciona.

 @media (largura máxima: 800px) {
  h1 {
    Tamanho da fonte: 2rem; }

  .botão {
    Largura: 12rem;
  } 

Certificamos de que quando a largura da nossa página cai para 800px, a fonte e os botões reduzirão em tamanho. Então, para terminar as coisas, queremos segmentar a altura também e verifique se nossos botões descem a página quando a altura da página ficar abaixo de 700px.

 @media (max-altura: 700px) {
  .botão {
    Top: 70%;
}} 

Quer salvar suas páginas? Exporte-os como PDFs e salve-os em segurança armazenamento na núvem .

Evento Web Design. Gere London Retorna em 19-21 de setembro de 2018, oferecendo uma programação embalada de alto-falantes líderes da indústria, um dia inteiro de workshops e valiosas oportunidades de networking - não perca. Obtenha seu ingresso de geração agora .

Este artigo foi originalmente publicado na Net Magazine Edição 305. . Inscreva-se agora .

Consulte Mais informação:

• 5 novos sites sensacionais a serem inspirados
• Crie um efeito de texto 3D animado
• 19 Grandes Websites de rolagem paralaxe