Construye una página de destino de pantalla dividida animada

[dieciséis]

Si está usando CODEPEN, asegúrese de que el CSS esté configurado en 'SCSS' en la configuración del lápiz. Puede hacer este cambio haciendo clic en la pestaña Configuración, elija 'CSS' y cambie el preprocesador CSS a SCSS en las opciones desplegables.

Luego podemos comenzar a agregar en nuestro HTML. Vamos a envolver una sección llamada 'izquierda' y una sección llamada 'derecha' dentro de una clase de contenedores, con ambas secciones dadas una clase de 'pantalla'.

 & lt; div clase = "contenedor" y gt;
  & lt; sección clase = "pantalla izquierda" & gt;
  & lt; / Sección y GT;
  & lt; sección clase = "pantalla derecha" & gt;
  & lt; / Sección y GT;
& lt; / DIV & GT; 

02. Terminar el HTML

Para finalizar nuestro HTML, agregaremos un título para cada sección usando un H1 etiqueta. Debajo de lo que tendremos que agregar en un botón, que vincularía a otra página si este era un proyecto del mundo real. Le daremos a esto una clase de botón Para mantener las cosas agradables y simples.

 & lt; div clase = "contenedor" y gt;
   & lt; sección clase = "pantalla izquierda" & gt;
    & lt; h1 & gt; Mens Fashion & Lt; / H1 & GT;
      & lt; Button & GT;
       & lt; un href = "#" clase = "botón" y gt; Aprenda más y lt; / a & gt;
      & lt; / Button & GT;
    & lt; / Sección y GT;

    & lt; sección clase = "pantalla derecha" & gt;
       & lt; H1 & GT; Womens Fashion & Lt; / H1 & GT;
        & lt; Button & GT;
          & lt; a href = "#" clase = "botón" y gt; Aprenda más y lt; / a & gt;
        & lt; / Button & GT;
     & lt; / Sección y GT; 

03. Explore las variables de SASS

Lo único que nos encanta de Sass es el uso de variables. Aunque las variables CSS nativas están recibiendo más apoyo, mantendremos las cosas seguras utilizando SASS. Pondremos esto en la parte superior de nuestra .scsss , y puedes elegir los colores que quieras, pero usando rgba Los valores nos darán más flexibilidad.

 / ** Variables ** /

$ contenedor-bgcolor: # 444;
$ izquierda-Bgcolor: RGBA (136, 226, 247, 0.7);
$ onlight-button-hover: RGBA (94, 226, 247, 0.7);
$ derecha-bgcolor: RGBA (227, 140, 219, 0.8);
$ Button-Hover: RGBA (255, 140, 219, 0.7);
$ Hover-Anchura: 75%;
$ PEQUEÑO ANCHO: 25%;
$ animatespeed: 1000ms; 

04. Ajustar el estilo del cuerpo.

En primer lugar, borraremos todo el relleno predeterminado y el margen al cuerpo y luego estableceremos la familia de fuentes para abrir SANS. Esto solo afectará el botón, por lo que no importa demasiado qué fuente usamos. Luego estableceremos el ancho y la altura para 100% y asegúrese de que cualquier cosa que se desborde en el eje X se oculte.

 HTML, CUERPO {
  relleno: 0;
  Margen: 0;
  FONT-FAMILY: 'Abierto Sans', Sans-Serif;
  Ancho: 100%;
  Altura: 100%;
  OverFlow-X: Oculto;
} 

05. Estilo los títulos de la sección.

Es hora de elegir una fuente de Google para los títulos de la sección, hemos elegido la pantalla de Playfair. Luego usando traducex Podemos asegurarse de que los títulos de la sección siempre se centren en el eje X.

h1 {
  Tamaño de fuente: 5REM;
  Color: #fff;
  Posición: Absoluto;
  izquierda: 50%;
  TOP: 20%;
  Transformar: Translatex (-50%);
  Espacio blanco: Nowrap;

  FONTANTE-FAMILIA: 'PLAYFAIR PANTALLA', Serif;
} 

06. Hacer que los CTAS se destaquen.

Nuestros botones actuarán como nuestras llamadas a la acción, por lo que estos deben ser grandes, audaces y posicionados donde son fáciles de hacer clic. Ambos botones tendrán una frontera blanca y un efecto de transición interesante. Los estilos predeterminados para ambos botones serán los mismos, sin embargo, cambiaremos sus colores en el flujo.

 .button {
  bloqueo de pantalla;
  Posición: Absoluto;
  izquierda: 50%;
  Top: 50%;
  Altura: 2.6REM;
  PADDING-TOP: 1.2REM;
  Ancho: 15REM;
  Text-alinec: Centro;
  color blanco;
  Frontera: 3px sólido #fff;
  Radio de borde: 4px;
  Peso de fuentes: 600;
  Transformación de texto: mayúscula;
  Decoración de texto: Ninguno;
  Transformar: Translatex (-50%);
  Transición: Todos .2s; 

Los botones principales tendrán un buen efecto de flores simple y usaremos las variables SASS que especificamos para el color, que será un color similar al fondo de la página.

 .screen.left .button: hover {
  Fondo-color: $ Botón izquierdo-Hover;
  Color de la frontera: $ Botón izquierdo-Hover;
}

.screen.right .button: hover {
  Fondo-color: $ Botón derecho-Hover;
  Color de la frontera: $ Derecho-Hover; 

07. Establecer el fondo del contenedor y las pantallas.

La clase de contenedores actuará como la envoltura de nuestra página y estableceremos la posición de esto a relativa, simplemente porque queremos posicionar las pantallas en posicionamiento absoluto. Le daremos al contenedor un color de fondo predeterminado, pero, por supuesto, esto no se verá porque estaremos configurando diferentes colores para ambos fondos de pantalla.

 .container {
  Posición: Relativo;
  Ancho: 100%;
  Altura: 100%;
  Fondo: $ contenedor-bgcolor;
  
    .pantalla {
      Posición: Absoluto;
      Ancho: 50%;
      Altura: 100%;
      Desbordamiento: oculto;
    }
} 

08. Añadir imágenes de fondo

Tanto las secciones izquierda como la derecha mostrará una imagen, y puede encontrar imágenes de imágenes de sitios web como sitios web como Desaparecer De Pixabay o Pexels (que he usado en este tutorial). Para facilitar las cosas, he usado un servicio gratuito de alojamiento y uso compartido de imágenes llamado IMGBB para que podamos enlazar en nuestro CSS.

 .screen.left {
  izquierda: 0;
  ANTECEDENTES: URL ('https://preview.ibb.co/cpabrm/pexels_photo_450212_1.jpg') Centro central no-repetición;
  Tamaño de fondo: cubierta;
  
    & amp;: Antes {
       Posición: Absoluto;
      contenido: "";
      Ancho: 100%;
      Altura: 100%;
      Fondo: $ izquierda-bgcolor;
    }
} 

El lado derecho de la página también mostrará una imagen de fondo usando IMGBB, y estableceremos el color de fondo en rosa. De nuevo, establecemos el tamaño de fondo para cubrir . Esto nos permitirá cubrir todo el elemento contenible, que en nuestro caso es el .pantalla clase.

 .screen.right {
  derecha: 0;
  ANTECEDENTES: URL ('https://preview.ibb.co/mtopcr/seth_doyle_82563_1.jpg') Centro central no-repetición;
  Tamaño de fondo: cubierta;
  
   & amp;: Antes {
      Posición: Absoluto;
      contenido: "";
      Ancho: 100%;
      Altura: 100%;
      Fondo: $ derecha-bgcolor;
    }
} 

09. Añadir transiciones y flores de efectos.

La velocidad de animación para nuestro efecto de flujo en ambas pantallas se controlará mediante una transición que contiene el valor de nuestra variable $ animatespeed , que es 1000 ms (un segundo). Luego, nos quitemos al darle a la animación un poco de alivia, lo cual es una facilidad adentro y fuera que ayudará a darnos una animación más suave.

 .screen.left, .screen.right, .screen.right: antes, .screen.left: antes de
  Transición: $ AnimatesPeed TODO FAVE-IN-OUT;
} 

Lo que queremos pasar ahora es que cuando se enfoca en la pantalla de la izquierda, habrá una clase agregada a esa sección utilizando JavaScript (que escribiremos en un paso posterior). Cuando se agrega esta clase, entonces esa pantalla se estirará a cualquier ancho de la variable que especificamos, que será del 75%, y luego se establecerá el lado derecho en la variable de ancho más pequeña (25%).

 .Hover-Izquierda .left {
  Ancho: $ Hover-Ancho;
}

.HOVER-IZQUIERDA .-right {
  Ancho: $ pequeño ancho;
}
.HOVER-IZQUIERDA. REICION: ANTES DE {
  Índice Z: 2;
} 

Esto funciona exactamente lo mismo que el lado izquierdo, donde se agregará una nueva clase en el cursor de ratón utilizando JavaScript, y la pantalla derecha se extenderá en consecuencia. También necesitamos asegurarnos de que el índice z se establece en 2 Así que el botón CTA se vuelve más prominente.

 .HOVER-DUERTE .RIGHT {
  Ancho: $ Hover-Ancho;
}

.HOVER-DERECHO. TLEFT {
  Ancho: $ pequeño ancho;
}

.Over-Derecha .left: antes de
  Índice Z: 2;
} 

10. Muévete a JavaScript

Utilizaremos un toque de Vanilla Javascript para ayudarnos a agregar y eliminar las clases CSS y también utilizaremos algunas de las nuevas características de ES6. Lo primero que debemos hacer es declarar algunas variables constantes.

Porque vamos a usar documento Más de una vez, estableceremos una variable constante llamada Doc y almacenar el documento dentro de eso, para que podamos mantener la palabra "documento" agradable y corta.

 Const DOC = DOCUMENTO; 

Ahora necesitamos establecer tres constantes más que almacenarán el .derecho De .izquierda y .envase Selectores. La razón por la que estamos usando constantes es porque sabemos que no queremos cambiar el valor de estos, por lo que el uso de constantes tiene sentido. Con estos ahora, podemos seguir adelante y agregarles algunos eventos de ratón.

 Const Right = Doc.QuerySelector (". Derecho");
const izquierda = doc.Quyselector (". izquierda");
Const conteider = Doc.QuerySelector (". Contenedor"); 

Utilizando la izquierda Variable constante Declaramos en el último paso, ahora podemos agregar un escuchador de eventos a él. Este evento será el mouster Evento y en lugar de usar una función de devolución de llamada, usaremos otra función ES6 llamada Funciones de flecha '(() = & gt;) .

 // Agrega una clase al elemento del contenedor en el flujo
izquierdo.addeventlistener ("mouseunter", () = & gt; {
  contenedor.claslist.add ("Hover-Iznt");
}); 

11. Añadir y eliminar una clase.

En el último paso, nuestro oyente de eventos agregó un mouster Evento que se dirige a la clase principal del contenedor y agrega una nueva clase llamada hover-izquierda al elemento de la sección de la izquierda. Con esto se llama agregado, ahora necesitamos eliminarlo cuando nos apartamos. Vamos a hacer esto usando el mouseleado evento y el .retirar() método.

 // elimina la clase que se agregó en el flujo
izquierda.addeventlistener ("mouseleave", () = & gt; {
  contenedor.classlist.reemove ("Hover-Iznt");
}); 

Hasta ahora lo hemos hecho todo en la pantalla izquierda. Ahora terminaremos del JavaScript y agregaremos y eliminaremos las clases en los elementos de la sección derecha. Nuevamente, hemos utilizado la sintaxis de la función de flecha aquí para evitar que todo se vea bien y ordenado.

 Right.AddeventListener ("MouseEnter", () = & gt; {
  contenedor.claslist.add ("Hover-derecha");
});

Right.AddeventListener ("Mouseleave", () = & gt; {
  contenedor.claslist.reemove ("Hover-derecha");
}); 

12. Haz que responda.

Ningún proyecto: no importa cuán grande o pequeño, debería evitar que sean responsivados. Entonces, en este paso, agregaremos algunas consultas de medios a nuestro CSS, y haremos este pequeño proyecto como adaptable a los dispositivos móviles lo mejor que podamos. Vale la pena revisar el Códigos de código original Para ver cómo funciona esto.

 @media (max-ancho: 800px) {
  h1 {
    Tamaño de fuente: 2REM; }

  .botón {
    Ancho: 12REM;
  } 

Nos hemos asegurado de que cuando el ancho de nuestra página llegue a 800px, la fuente y los botones se reducirán de tamaño. Por lo tanto, para terminar las cosas, queremos apuntar a la altura también y asegúrese de que nuestros botones se muevan hacia abajo en la página cuando la altura de la página llegue por debajo de 700px.

 @media (máximo altura: 700px) {
  .botón {
    Top: 70%;
}} 

¿Quieres guardar tus páginas? Exportarlos como PDF y guardarlos en Seguro almacenamiento en la nube .

Evento de diseño web Generar londres Devoluciones del 19 al 21 de septiembre de 2018, que ofrece un calendario lleno de oradores líderes en la industria, un día completo de talleres y oportunidades de redes valiosas, no se lo pierda. Obtenga su boleto de generación ahora .

Este artículo fue publicado originalmente en la revista Net emisión 305 . Suscríbase ahora .

Leer más:

• 5 nuevos sitios web sensacionales para inspirarse en
• Crea un efecto de texto 3D animado.
• 19 grandes sitios web de desplazamiento de paralaje