Cómo hacer que su sitio web sea receptivo e interactivo con CSS y JavaScript

Tener un sitio web que sea receptivo e interactivo es un requisito no escrito para todos los propietarios de sitios web. Los beneficios de tener un sitio web interactivo que se ajusta perfectamente a cualquier tamaño de pantalla no pueden ser exagerados.

Debe crear una experiencia personalizada para cada usuario que visite su sitio web, y con varias propiedades de CSS y algunas funciones de JavaScript, puede hacerlo.

En este artículo del tutorial, aprenderá cómo hacer que su sitio web HTML y CSS sea receptivo e interactivo.

Hacer que su sitio web sea interactivo

Cuando crea un sitio web, comienza de arriba hacia abajo. Por lo tanto, hacer que su sitio web sea interactivo es un proceso que también debe comenzar desde arriba. Llevar este sitio web de cartera construimos como ejemplo. Tiene un diseño limpio pero no es completamente interactivo.

Cada elemento del menú cambia de color cuando pasa el mouse sobre él, pero ¿cómo sabe en qué sección del sitio web se encuentra? Bueno, hay dos formas de hacerlo: activar elementos del menú con onscroll y al hacer clic eventos.

Activar un elemento del menú cada vez que se desplaza hacia arriba o hacia abajo en un sitio web requerirá el uso de una función de JavaScript que puede llamar "activeMenu". Esta función necesitará acceder a los elementos del menú en la barra de navegación, así como a cada sección del sitio web. Afortunadamente, puede lograr esto con el uso de la querySelectorAll Selector de DOM.

En el directorio de su proyecto, deberá crear un nuevo archivo JavaScript y vincularlo a su archivo HTML mediante la siguiente línea de código:

en un texto etiqueta, la src valor es el nombre del archivo JavaScript, que en el ejemplo anterior es main.js.

El archivo main.js

// usando javascript para activar el elemento del menú onscroll
const li = document.querySelectorAll (". enlaces");
const sec = document.querySelectorAll ("sección");
function activeMenu () {
let len ​​= seg. longitud;
while (- len && window.scrollY + 97 li.forEach (ltx => ltx.classList.remove ("activo"));
li [len] .classList.add ("activo");
}
activeMenu ();
window.addEventListener ("scroll", activeMenu);

El querySelectorAll selector en el código anterior toma todos los elementos del menú usando el Enlaces clase. También captura todas las secciones del sitio web utilizando el sección etiqueta. El activarMenú luego, la función toma la longitud de cada sección y elimina o agrega una variable "activa" según la posición de desplazamiento del usuario.

Para que el código anterior funcione, deberá actualizar la hoja de estilo del sitio web de la cartera para incluir el siguiente código en la sección de la barra de navegación:

#navbar .menu li.active a {
color: #fff;
}

Activar elementos de menú al hacer clic

 // usando jquery para activar el elemento del menú al hacer clic
$ (documento) .on ('clic', 'li', función () {
$ (esto) .addClass ('activo'). hermanos (). removeClass ('activo')
})

Agregar el código anterior a su archivo JavaScript activará cada sección cuando un usuario haga clic en el elemento de menú correspondiente. Sin embargo, utiliza jQuery (una biblioteca de JavaScript) que realiza esta tarea con una cantidad mínima de código.

Un problema que puede encontrar cuando activa cada elemento del menú al hacer clic es que la barra de navegación cubrirá la parte superior de cada sección. Para evitar esto, simplemente inserte el siguiente código en la sección de utilidades de la hoja de estilo:

sección{
margen superior de desplazamiento: 4.5rem;
}

El código anterior asegurará que cuando navegue a cada sección haciendo clic, la barra de navegación permanecerá 4.5rem por encima de cada sección (o 72px). Otra característica interesante para agregar a su sitio web es desplazamiento suave, que puede lograr con el siguiente código CSS:

html {
comportamiento de desplazamiento: suave;
}

Hacer que su página de inicio sea interactiva

En la mayoría de los sitios web, un usuario verá su primer botón en la barra de navegación o en la página de inicio. Además de parecer una llamada a la acción, un botón también debe ser interactivo. Una excelente manera de lograr esto es con CSS :flotar selector, que asigna un nuevo estado a un elemento cada vez que el mouse de un usuario pasa sobre él.

En el sitio web de la cartera, el único enlace de la página de inicio tiene la btn class (que le da la apariencia de un botón). Por lo tanto, para que este botón sea interactivo, simplemente puede asignar el :flotar selector al btn clase.

Usando el: selector de desplazamiento

 .btn: hover {
fondo: #fff;
color azul;
borde: azul sólido;
radio del borde: 5px;
}

Agregar el código anterior a la sección de utilidades del sitio web de la cartera hará que el botón pase de un estado a otro cuando pase el mouse sobre él.

Otra característica interesante de la página de inicio es una animación de escritura, que utiliza typed.js (un script de animación de escritura jQuery).

Usando typed.js

// script de animación de texto de escritura jquery
var typed = new Typed (". typing", {
cadenas: ["Desarrollador de software"],
typeSpeed: 100,
backSpeed: 60,
bucle: verdadero
});

Después de agregar el código anterior a su archivo JavaScript, deberá realizar la siguiente modificación en el HTML:

Y yo soy un 

En el código anterior, reemplaza el texto "Desarrollador de software" en el código original con la clase "mecanografía", creando la animación de escritura.

Hacer interactivas otras secciones de su sitio web

Crear una clase de utilidad de botón y usar el flotar selector se asegurará de que cada sección de su página web que tenga un botón sea interactiva. Las propiedades de transición y transformación de CSS también tienen algunas características de animación excelentes que puede agregar a su sitio web.

Si tiene una galería o cualquier sección de imágenes en su sitio web, puede usar las dos propiedades mencionadas anteriormente para crear un efecto de desplazamiento en sus imágenes. Agregar el siguiente código CSS a las imágenes en la sección del proyecto del sitio web de la cartera creará un efecto de transformación en las imágenes de la sección:

.img-container img {
ancho máximo: 450px;
transición: todos los 0.3s de salida fácil;
cursor: puntero;
}
.img-container img: hover {
transformar: escala (1.2);
}

Hacer que su sitio web sea receptivo

Al crear un sitio web receptivo, hay cuatro tipos de dispositivos diferentes que debe considerar: computadoras de escritorio, portátiles, tabletas y teléfonos inteligentes. Además, cada uno de estos tipos de dispositivos también tiene una variedad de tamaños de pantalla diferentes, pero tener estas cuatro categorías es un buen lugar para comenzar.

Relacionado: Cómo utilizar consultas de medios en HTML y CSS para crear sitios web receptivos

En su estado actual, el sitio web de la cartera se muestra bien en computadoras de escritorio y portátiles. Por lo tanto, hacerlo receptivo significará crear un diseño personalizado para tabletas y teléfonos inteligentes.

La mejor manera de lograr un diseño receptivo con CSS y HTML es a través de consultas de medios. Puede colocar una consulta de medios dentro de un archivo CSS o HTML Enlace etiqueta. El último enfoque facilita la escalabilidad y también es el método que demostraré.

Deberá crear dos archivos CSS adicionales. El primer archivo CSS creará la estructura de diseño para computadoras portátiles y tabletas pequeñas en modo horizontal. Tendrá un ancho máximo de 1100px, como puede ver en la siguiente etiqueta de enlace:

Insertando la línea de código de arriba dentro del cabeza etiqueta de su archivo HTML (o en este caso el archivo del sitio web de la cartera) garantizará que todos los dispositivos con un ancho de pantalla de 1100px y bajo usará el estilo en el widescreen.css Archivo.

El archivo widescreen.css

/* Casa */
#navbar .container h1 a span {
pantalla: ninguna;
}
#home .home-content .text-3 span {
color: # 000000;
}
/* Portafolio */
.proyectos {
justificar-contenido: centro;
}
.proyecto{
flex: 0;
}
/* Acerca de */
.about-content {
flex-direction: column;
}
/* Contacto */
.contact-content {
flex-direction: column;
}

El código anterior producirá un diseño receptivo en dispositivos con tamaños de pantalla de 1100px y menos, como puede ver en el resultado a continuación:

El segundo archivo CSS creará la estructura de diseño para teléfonos inteligentes y tabletas en modo vertical. Tendrá un ancho máximo de 760px, como puede ver en la siguiente etiqueta de enlace:

El archivo mobile.css

/ * Barra de navegación * /
#navbar .container h1 a span {
pantalla: ninguna;
}
#navbar .container .menu {
margen izquierdo: 0rem;
}
# ham-menu {
ancho: 35px;
altura: 30px;
margen: 30px 0 20px 20px;
cursor: puntero;
}
#navbar .container .menu-wrap .menu {
pantalla: ninguna;
}
.bar{
altura: 5px;
ancho: 100%;
color de fondo: #ffffff;
bloqueo de pantalla;
radio del borde: 5px;
transición: 0,3 s de facilidad;
}
# bar1 {
transformar: translateY (-4px);
}
# bar3 {
transformar: translateY (4px);
}
/* Casa */
#casa{
pantalla: flex;
background: url ("/ images / home.jpg") centro de no repetición;
altura: 100vh;
}
#home .container {
margen: 6rem 1rem 2rem 1rem;
acolchado: 2rem;
}
#home .home-content .text-1 {
tamaño de fuente: 20px;
margen: 1.2rem;
}
#home .home-content .text-2 {
tamaño de fuente: 45px;
peso de fuente: 500;
margen: 1rem;
}
#home .home-content .text-3 {
tamaño de fuente: 22px;
margen: 1.2rem;
}
#home .home-content .text-3 span {
color: # 0000ff;
peso de fuente: 600;
}
#home .container {
margen izquierdo: 4.5rem;
}
/* Acerca de */
#about .container {
acolchado: 0;
}
/* Contacto */
#contact .container {
acolchado: 0;
}

El archivo anterior producirá el siguiente diseño de teléfono inteligente receptivo:

Otras formas de crear sitios web interactivos y receptivos

Saber cómo hacer que su sitio web sea receptivo e interactivo usando CSS y HTML es una gran habilidad. Pero estos no son los únicos métodos para hacer que su sitio web sea receptivo e interactivo.

Muchos marcos frontend e incluso plantillas en servicios como Joomla facilitan diseños interactivos receptivos.

15 elegantes plantillas de Joomla para sitios web receptivos

¿Quiere crear un sitio web para su negocio o blog? Pruebe estas plantillas de Joomla.

Leer siguiente

Sobre el Autor