Crea tours interactivos para tus sistemas web

Driver.js es una librería Open Source de JavaScript ligera y altamente personalizable, esta escrita en TypeScript no tiene dependencias externas y es altamente personalizable, ofrece varias opciones que permiten modificar su comportamiento y proporciona ganchos para manipular los elementos cuando están resaltados, a punto de resaltarse o deseleccionados. Su función principal es guiar la atención del usuario en una página web y se utiliza comúnmente para crear tours interactivos de productos o funcionalidades, resaltar elementos específicos de la interfaz, ofrecer ayuda contextual o simplemente dirigir el enfoque del usuario a donde es necesario.

Es compatible con los principales navegadores y dispositivos móviles, facilitando la creación de experiencias guiadas para mejorar la incorporación de usuarios o destacar novedades.

Manos a la obra.

Instalación de Driver.js

Con NPM:

Para instalar Driver.js mediante NPM, usa el siguiente comando:

npm install driver.js

Con CDN:

<script src="https://cdn.jsdelivr.net/npm/driver.js@latest/dist/driver.js.iife.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@latest/dist/driver.css"/>

Crear un Tour sencillo

Primero necesitamos crea un proyecto en tu editor favorito con la siguiente estructura:

style.css :

body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
}

header {
    background: #333;
    color: #fff;
    padding: 10px 0;
}

header h1 {
    float: left;
    margin: 0;
}

header nav {
    float: right;
}

header ul {
    padding: 0;
    list-style: none;
}

header nav li {
    display: inline;
    margin-left: 20px;
}

header nav a {
    color: #fff;
    text-decoration: none;
}

#hero {
    background: #f4f4f4;
    text-align: center;
    padding: 100px 0;
}

#hero h2 {
    margin-top: 0;
    font-size: 2.5em;
}

.btn {
    display: inline-block;
    background: #333;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
}

.btn-secondary {
    background: #555;
}

#features {
    padding: 20px 0;
    text-align: center;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.feature-item {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.feature-item img {
    max-width: 100%;
    height: auto;
}

#cta {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 50px 0;
}

#cta h3 {
    margin-top: 0;
}

footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
}

index.html :

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Veterinaria D'Pelos</title>
    <link rel="stylesheet" href="css/style.css">       
    <script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css">
</head>
<body>
    <header class="nosotros">
        <div class="container">
            <h1>Veterinaria D'Pelos</h1>
            <nav class="conozcanos">
                <ul>
                    <li><a href="#">Inicio</a></li>
                    <li><a href="#">Características</a></li>
                    <li><a href="#">Contacto</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section id="hero">
        <div class="container">
            <h2>CENTRO DE CIRUGÍA MÍNIMAMENTE INVASIVA Y DIAGNÓSTICO</h2>
            <p>Nuestra veterinaria cuenta con más de tres décadas de actividad y colaboraciones con médicos de amplia y probada experiencia en diversas disciplinas médico-veterinarias.</p>
            <a href="#" class="btn cita">Reserva tu cita</a>
        </div>
    </section>

    <section id="features">
        <div class="container servicios">
            <h3>Nuestros servicios</h3>
            <div class="feature-grid">
                <div class="feature-item">
                    <img src="https://ximg.es/300x200/333/fff" alt="Laparoscopía">
                    <h4>Laparoscopía</h4>
                    <p>Técnica quirúrgica mínimamente invasiva que permite ver y operar al paciente mediante la inserción de un instrumento óptico llamado laparoscopio.</p>
                </div>
                <div class="feature-item">
                    <img src="https://ximg.es/300x200/333/fff" alt="Radiología">
                    <h4>Radiología</h4>
                    <p>Gracias a los exámenes radiológicos es posible identificar anomalías como: formas de artrosis, alteraciones de segmentos óseos, ingestiones accidentales, fracturas, displasia de cadera y codo.</p>
                </div>
                <div class="feature-item">
                    <img src="https://ximg.es/300x200/333/fff" alt="Cardiología">
                    <h4>Cardilogía</h4>
                    <p>La cardiología es la rama de la medicina que se ocupa de la prevención, el reconocimiento y el tratamiento de las enfermedades del corazón.</p>
                </div>
            </div>
        </div>
    </section>

    <section id="cta">
        <div class="container">
            <h3>¿Listo para empezar?</h3>
            <p>Únete a nosotros hoy mismo y descubre la diferencia.</p>
            <a href="#" id="start-tour-button" class="btn btn-secondary">Iniciar Tour</a>
        </div>
    </section>

    <footer>
        <div class="container">
            <p>&copy; 2025 JC Mouse. Todos los derechos reservados.</p>
        </div>
    </footer>

</body>
<script>

</script>

</html>

Abre el proyecto en tu navegador y observaras una sencilla pagina web. por el momento no hace nada ya que la sección de javascript esta vacia, pero ya cambiaremos eso.

En la sección de javascript, colocaremos lo siguiente:

<script>
    //boton para iniciar el tours
    const startTourButton = document.getElementById('start-tour-button');
    //Instancia a la libreria
    const driver = window.driver.js.driver;

    const driverObj = driver({              
        overlayColor: '#fdfab3',
        opacity: 0.80, // Nivel de opacidad del fondo
        padding: 10, // Espacio alrededor del elemento resaltado
        allowClose: true, // Permite cerrar el tour haciendo clic fuera
        overlayClickAllowsDriverControl: true, // Clic en overlay avanza/retrocede
        stageBackground: '#ffffff', // Color de fondo del área resaltada        
        doneBtnText: 'Terminar',        
        closeBtnText: 'Cerrar',
        nextBtnText: 'Siguiente',
        prevBtnText: 'Anterior',        
        showProgress: true, //muestra el progreso del tours
        steps: [
            { element: '.nosotros', 
              popover: { title: 'Bienvenido al Tour', description: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque' } },
            { element: '.conozcanos', 
              popover: { title: 'Conozcanos', description: ' Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit' } },
            { element: '.cita', 
              popover: { title: 'Reserve su cita', description: 'Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis' } },
            { element: '.servicios', 
              popover: { title: 'Nuestros servicios', description: 'uis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam' } },
        ]
    });    

    if (startTourButton) {
        startTourButton.addEventListener('click', () => {
            driverObj.drive(); // Inicia el tour
        });
    } 
</script>

El código esta sencillo y esta comentado, sin embargo aclaremos:

3: Creamos el boton para iniciar la animación.

5: Declaramos una instancia a la libreria driver.js

7: A partir de esta linea iniciamos la configuración del tour. Indicamos aspectos importantes como los colores, el texto de los botones, etc.

En «steps» declaramos uno a uno cada elemento del tour que como podemos notar tiene dos partes, «element» que indica el elemento HTML que será resaltado y se lo declara por la clase o id. Tambien tenemos a «popover», donde escribimos el titulo y descripción que se mostrara en pantalla.

11: Finalmente quedamos atentos para cuando el usuario presione el boton «Iniciar Tour». Si queremos que el tour inicie automaticamente, solo bastaria con declarar driverObj.drive();

Recargamos la pagina y presionamos el boton «Iniciar Tour»:

Tienes el proyecto completo en GitHub: https://github.com/jcmouse/SampleTours

Enjoy!!!

Crea tours interactivos para tus sistemas web

Tags

Últimas entradas

Autenticación basada en API Keys en Laravel 12

Distribución de escaños con el método D’Hondt caso práctico (Bolivia)

BuilderAI la startup que simulaba ser una Inteligencia Artificial

Importar datos CSV a base de datos usando Laravel Seeder

Ejemplo de procesamiento por lotes con PHP

Artículos similares

Codigo de Control en Visual Basic | Impuestos Bolivia

Ejemplo completo de CORBA en Java

Como saber el tipo de objeto que contiene un hashmap

Convierte tus dibujos web en Código HTML

Dibujar primitivas 2d en html5

Compartir texto plano con un ShareActionProvider en Android

JC Mouse | Bolivia