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

Ha configurado su sitio web con HTML y CSS, pero ahora necesita agregar lógica. Esto es lo que debes hacer.

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 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. Tome este sitio web de cartera que creamos 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 eventos onscroll y onclick .

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 del selector querySelectorAll DOM

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

<script src="main.js"></script>

En una escritura de la etiqueta, la src valor es el nombre del archivo JavaScript, que en el ejemplo anterior es .main.js

El archivo main.js

// using javascript to activate menu item onscroll
const li = document.querySelectorAll(".links");
const sec = document.querySelectorAll("section");

function activeMenu(){
let len=sec.length;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach(ltx => ltx.classList.remove("active"));
li[len].classList.add("active");
}
activeMenu();
window.addEventListener("scroll", activeMenu);

El selector querySelectorAll en el código anterior toma todos los elementos del menú usando la clase de enlaces . También captura todas las secciones del sitio web utilizando la etiqueta de sección . La función enableMenu luego toma la longitud de cada sección y elimina o agrega una variable «activa» dependiendo de 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

 //using jquery to activate menu item onclick
$(document).on('click', 'li', function(){
$(this).addClass('active').siblings().removeClass('active')
})

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:

section{
scroll-margin-top: 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 el desplazamiento suave , que puede lograr con el siguiente código CSS:

html {
scroll-behavior: smooth;
}

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 el selector CSS : hover , 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 en la página de inicio tiene la clase btn (que le da la apariencia de un botón). Entonces, para que este botón sea interactivo, simplemente puede asignar el selector : hover a la clase btn .

Usando el: selector de desplazamiento

 .btn:hover{
background: #fff;
color:blue;
border: blue solid ;
border-radius: 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 para la página de inicio es una animación de escritura, que usa (un script de animación de escritura jQuery).typed.js

Usando typed.js

// jquery typing text animation script
var typed = new Typed(".typing", {
strings: ["Software Developer"],
typeSpeed: 100,
backSpeed: 60,
loop: true
});

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

<div class="text-3">And I'm a <span class="typing"></span></div>

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 selector de desplazamiento asegurará 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{
max-width: 450px;
transition: all 0.3s ease-out;
cursor: pointer;
}

.img-container img:hover{
transform: scale(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.

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 la etiqueta de enlace HTML . 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:

<link rel="stylesheet" media="screen and (max-width: 1100px)" href="css/widescreen.css">

Inserción de la línea de código anterior dentro de la cabeza de la etiqueta de su archivo HTML (o en este caso el archivo de página web cartera) se asegurará de que todos los dispositivos con un ancho de pantalla de 1100px y bajo usará el estilo en el archivo.widescreen.css

El archivo widescreen.css

/* Home */
#navbar .container h1 a span{
display: none;
}

#home .home-content .text-3 span{
color: #000000;
}

/* Portfolio */
.projects{
justify-content: center;
}
.project{
flex: 0;
}

/* About */
.about-content{
flex-direction: column;
}

/* Contact */
.contact-content{
flex-direction: column;
}

El código anterior producirá un diseño receptivo en dispositivos con tamaños de pantalla de 1100px o 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:

<link rel="stylesheet" media="screen and (max-width: 760px)" href="css/mobile.css">

El archivo mobile.css

/* Navbar */

#navbar .container h1 a span{
display: none;
}

#navbar .container .menu{
margin-left: 0rem;
}

#ham-menu{
width: 35px;
height: 30px;
margin: 30px 0 20px 20px;
cursor: pointer;
}
#navbar .container .menu-wrap .menu{
display: none;
}

.bar{
height: 5px;
width: 100%;
background-color: #ffffff;
display: block;
border-radius: 5px;
transition: 0.3s ease;
}
#bar1{
transform: translateY(-4px);
}
#bar3{
transform: translateY(4px);
}

/* Home */
#home{
display: flex;
background: url("/images/home.jpg") no-repeat center;
height: 100vh;
}

#home .container{
margin: 6rem 1rem 2rem 1rem;
padding: 2rem;
}

#home .home-content .text-1{
font-size: 20px;
margin: 1.2rem;
}
#home .home-content .text-2{
font-size: 45px;
font-weight: 500;
margin: 1rem;
}
#home .home-content .text-3{
font-size: 22px;
margin: 1.2rem;
}
#home .home-content .text-3 span{
color: #0000ff;
font-weight: 600;
}

#home .container{
margin-left: 4.5rem;
}

/* About */
#about .container{
padding: 0;
}

/* Contact */
#contact .container{
padding: 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.

FUENTE: https://www.makeuseof.com/how-to-make-website-responsive/