Contenido
- 01. Prepárate
- 02. Termina el HTML
- 03. Explore las variables de Sass
- 04. Ajustar el estilo de la carrocería
- 05. Estilo de los títulos de las secciones
- 06. Haz que las llamadas a la acción se destaquen
- 07. Establecer el fondo y las pantallas del contenedor
- 08. Agregar imágenes de fondo
- 09. Agregue transiciones y efectos de desplazamiento
- 10. Pasar a JavaScript
- 11. Agregar y quitar una clase
- 12.Haz que responda
Su página de destino es un elemento crucial en el diseño de su sitio web. Es la primera oportunidad real que tienes para presentar tu negocio, o el producto que vendes, por lo que su diseño es clave. Las páginas de destino están diseñadas con un único objetivo específico conocido como llamado a la acción (CTA). El uso de colores e imágenes para complementar las llamadas a la acción y la experiencia del usuario es imprescindible.
- Vea el CodePen en funcionamiento para este tutorial
En este tutorial, explicaremos cómo crear una página de destino atractiva para una marca de moda ficticia. Se centrará en un diseño de pantalla dividida con imágenes grandes y transiciones animadas que ocurren al pasar el mouse.Esta página tendrá dos botones de llamada a la acción claros y usaremos HTML, Sass para el estilo y un toque de JavaScript vanilla que usa la sintaxis ES6 (recuerde asegurarse de que su alojamiento web se adapte a las necesidades de su sitio web). ¿Demasiado complejo? Cree un sitio web sin necesidad de código, pruebe con un simple creador de sitios web.
01. Prepárate
Si está utilizando CodePen, asegúrese de que el CSS esté configurado en "SCSS" en la configuración del lápiz. Puede realizar este cambio haciendo clic en la pestaña de configuración, elegir "CSS" y cambiar el preprocesador de CSS a SCSS en las opciones desplegables.
Entonces 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 contenedor, con ambas secciones con una clase de "pantalla".
div> sección> / sección> sección> / sección> / div>
02. Termina el HTML
Para finalizar nuestro HTML, agregaremos un título para cada sección usando un h1 etiqueta. Debajo de eso, necesitaremos agregar un botón, que se vincularía a otra página si se tratara de un proyecto del mundo real. Le daremos a esto una clase de botón para mantener las cosas agradables y simples.
div> sección> h1> Moda masculina / h1> botón> a href = "#"> Más información / a> / botón> / sección> sección> h1> Moda femenina / h1> botón> a href = "#"> Aprender Más / a> / botón> / sección>
03. Explore las variables de Sass
Lo único que a todos nos encanta de Sass es el uso de variables. Aunque las variables CSS nativas están recibiendo más soporte, mantendremos las cosas seguras usando Sass. Los pondremos en la parte superior de nuestro .scss, 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); $ botón izquierdo-flotante: rgba (94, 226, 247, 0.7); $ right-bgColor: rgba (227, 140, 219, 0.8); $ botón derecho-flotante: rgba (255, 140, 219, 0.7); $ hover-width: 75%; $ ancho pequeño: 25%; $ animateSpeed: 1000ms;
04. Ajustar el estilo de la carrocería
En primer lugar, borraremos todo el relleno y los márgenes predeterminados del cuerpo y luego configuraremos la familia de fuentes en Open Sans. Esto solo afectará al botón, por lo que no importa demasiado la fuente que usemos. Luego estableceremos el ancho y el alto en 100% y asegúrese de que todo lo que se desborde en el eje X quede oculto.
html, cuerpo {relleno: 0; margen: 0; familia de fuentes: "Open Sans", sans-serif; ancho: 100%; altura: 100%; overflow-x: oculto; }
05. Estilo de los títulos de las secciones
Es hora de elegir una fuente de Google para los títulos de las secciones: hemos elegido Playfair Display. Luego usando translateX podemos asegurarnos de que los títulos de las secciones siempre estén centrados en el eje X.
h1 {tamaño de fuente: 5rem; color: #fff; posición: absoluta; izquierda: 50%; arriba: 20%; transformar: translateX (-50%); espacio en blanco: nowrap; familia de fuentes: "Playfair Display", serif; }
06. Haz que las llamadas a la acción se destaquen
Nuestros botones actuarán como nuestras llamadas a la acción, por lo que deben ser grandes, llamativos y estar ubicados donde sea fácil hacer clic. Ambos botones tendrán un borde blanco y un interesante efecto de transición. Los estilos predeterminados para ambos botones serán los mismos, sin embargo, cambiaremos sus colores al pasar el mouse.
.button {display: block; posición: absoluta; izquierda: 50%; arriba: 50%; altura: 2.6rem; acolchado superior: 1.2rem; ancho: 15rem; alineación de texto: centro; color blanco; borde: 3px sólido #fff; radio del borde: 4px; peso de fuente: 600; transformación de texto: mayúsculas; decoración de texto: ninguna; transformar: translateX (-50%); transición: todos .2s;
Los botones principales tendrán un efecto de desplazamiento simple y agradable 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 {background-color: $ left-button-hover; color del borde: $ botón-izquierdo-hover; } .screen.right .button: hover {background-color: $ right-button-hover; color del borde: $ botón derecho-hover;
07. Establecer el fondo y las pantallas del contenedor
La clase contenedora actuará como nuestro envoltorio de página y estableceremos la posición de esta en relativa, simplemente porque queremos colocar las pantallas en un posicionamiento absoluto. Le daremos al contenedor un color de fondo predeterminado, pero, por supuesto, esto no se verá porque configuraremos diferentes colores para ambos fondos de pantalla.
.container {posición: relativa; ancho: 100%; altura: 100%; fondo: $ contenedor-BgColor; .screen {posición: absoluta; ancho: 50%; altura: 100%; desbordamiento: oculto; }}
08. Agregar imágenes de fondo
Tanto la sección izquierda como la derecha mostrarán una imagen, y puedes encontrar imágenes de archivo libres de regalías en sitios web como Unsplash, Pixabay o Pexels (que he usado en este tutorial). Para facilitar las cosas, he utilizado un servicio gratuito de alojamiento y uso compartido de imágenes llamado imgbb al que podemos vincular en nuestro CSS.
.screen.left {left: 0; background: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) centro centro sin repetición; background-size: cover; &: antes de {posición: absoluta; contenido: ""; ancho: 100%; altura: 100%; fondo: $ left-bgColor; }}
El lado derecho de la página también mostrará una imagen de fondo usando imgbb, y configuraremos el color de fondo en rosa. Nuevamente, configuramos el tamaño del fondo en cubrir. Esto nos permitirá cubrir todo el elemento contenedor, que en nuestro caso es el .pantalla clase.
.screen.right {right: 0; background: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) centro centro sin repetición; background-size: cover; &: antes de {posición: absoluta; contenido: ""; ancho: 100%; altura: 100%; fondo: $ right-bgColor; }}
09. Agregue transiciones y efectos de desplazamiento
La velocidad de animación de nuestro efecto de desplazamiento en ambas pantallas será controlada por una transición que contiene el valor de nuestra variable. $ animateSpeed, que es 1000 ms (un segundo). Luego, terminaremos dándole a la animación un poco de suavidad, que es una facilidad de entrada y salida que nos ayudará a que la animación sea más fluida.
.screen.left, .screen.right, .screen.right: antes, .screen.left: antes de {transición: $ animateSpeed todo facilidad de entrada y salida; }
Lo que queremos que suceda ahora es que cuando pase el cursor sobre la pantalla izquierda, se agregará una clase a esa sección usando JavaScript (que escribiremos en un paso posterior). Cuando se agrega esta clase, esa pantalla se extenderá a cualquier ancho de la variable que especificamos, que será el 75%, y luego el lado derecho se establecerá en la variable de ancho más pequeño (25%).
.hover-left .left {ancho: $ hover-width; } .hover-left .right {ancho: $ pequeño-ancho; } .hover-left .right: antes de {z-index: 2; }
Esto funciona exactamente igual que el lado izquierdo, donde se agregará una nueva clase al pasar el mouse usando JavaScript, y la pantalla derecha se extenderá en consecuencia. También debemos asegurarnos de que índice z se establece en 2 por lo que el botón de llamada a la acción se vuelve más prominente.
.hover-right .right {ancho: $ hover-width; } .hover-right .left {ancho: $ ancho pequeño; } .hover-right .izquierda: antes de {índice z: 2; }
10. Pasar a JavaScript
Usaremos un toque de JavaScript vanilla para ayudarnos a agregar y eliminar clases CSS y también usaremos algunas de las nuevas características de ES6. Lo primero que debemos hacer es declarar algunas variables constantes.
Porque estaremos usando documento más de una vez, estableceremos una variable constante llamada Doc y almacenar el documento dentro de él para que podamos mantener la palabra "documento" agradable y breve.
const doc = documento;
Ahora necesitamos establecer tres constantes más que almacenarán el .derecho, .izquierda y .envase selectores. La razón por la que usamos constantes es porque sabemos que no queremos cambiar el valor de estas, por lo que el uso de constantes tiene sentido. Con estos ahora configurados, podemos continuar y agregarles algunos eventos de mouse.
const right = doc.querySelector (". right"); const left = doc.querySelector (". izquierda"); const contenedor = doc.querySelector (". contenedor");
Utilizando la izquierda constante que declaramos en el último paso, ahora podemos agregarle un detector de eventos. Este evento será el mouseenter evento y en lugar de usar una función de devolución de llamada, usaremos otra característica de ES6 llamada Funciones de flecha '(() =>).
// agrega una clase al elemento contenedor en hover left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Agregar y quitar una clase
En el último paso, nuestro detector de eventos agregó un mouseenter evento que se dirige a la clase de contenedor principal y agrega una nueva clase llamada flotar a la izquierda al elemento de la sección izquierda. Con esto llamado agregado, ahora tenemos que eliminarlo cuando salimos de él. Haremos esto usando el ratón evento y el .retirar() método.
// elimina la clase que se agregó en hover left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Hasta ahora hemos hecho todo en la pantalla de la izquierda. Ahora terminaremos con JavaScript y agregaremos y eliminaremos clases en los elementos de la sección correcta. De nuevo, hemos utilizado la sintaxis de la función de flecha aquí para que todo se vea bien y ordenado.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12.Haz que responda
Ningún proyecto, sin importar cuán grande o pequeño sea, debe evitar ser adaptado. Entonces, en este paso agregaremos algunas consultas de medios a nuestro CSS y haremos que este pequeño proyecto se adapte lo mejor que podamos a los dispositivos móviles. Vale la pena consultar el CodePen original para ver cómo funciona.
@media (ancho máximo: 800px) {h1 {tamaño de fuente: 2rem; } .button {ancho: 12rem; }
Nos hemos asegurado de que cuando el ancho de nuestra página se reduzca a 800 px, la fuente y los botones se reducirán de tamaño. Entonces, para terminar, también queremos apuntar a la altura y asegurarnos de que nuestros botones se muevan hacia abajo en la página cuando la altura de la página sea inferior a 700px.
@media (altura máxima: 700px) {.button {top: 70%; }}
¿Quieres guardar tus páginas? Exportarlos como archivos PDF y guardarlos en un almacenamiento seguro en la nube.
Evento de diseño web Generar Londres regresa del 19 al 21 de septiembre de 2018, ofreciendo una agenda repleta de oradores líderes en la industria, un día completo de talleres y valiosas oportunidades para establecer contactos; no se lo pierda. Obtenga su boleto Generate ahora.
Este artículo fue publicado originalmente en la revista net. número 305. Suscríbase ahora.
