✅Mejora la Experiencia del Usuario con un Preloader Dinámico (Sin Plugins)

La manera en que una página web se presenta y se comporta durante las transiciones puede marcar una gran diferencia. Las transiciones suaves y visualmente atractivas no solo mejoran la estética de un sitio web, sino que también contribuyen a una navegación más fluida, manteniendo al usuario comprometido y reduciendo la tasa de abandono. El código que exploraremos hoy se centra precisamente en esto: implementar una transición de página elegante y dinámica con un círculo de progreso y un fondo negro mate.

Este código es ideal para desarrolladores y diseñadores web que buscan añadir un toque de profesionalismo y fluidez a sus sitios en WordPress. La transición se implementa utilizando una combinación de CSS y JavaScript, lo que permite a los usuarios experimentar un efecto visual atractivo mientras navegan entre páginas. El fondo negro mate ofrece un toque moderno y minimalista, mientras que el círculo de progreso y el texto dinámico mantienen informados a los usuarios sobre el estado de la carga.

Una de las principales ventajas de utilizar este código es que mejora la percepción de velocidad del sitio. Aunque la transición no reduce el tiempo de carga real, la percepción de una transición suave y animada puede hacer que el tiempo de espera parezca más corto, lo que mejora la experiencia general del usuario. Además, la integración de un texto dinámico que refleja el título de la página que se está cargando añade un nivel extra de personalización y profesionalismo.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

// Añadir CSS para la transición de página con círculo de progreso y fondo negro mate
function custom_page_transition_css() {
    echo '
    <style>
    body {
        opacity: 1;
        transition: opacity 0.5s ease-in-out;
    }
    .page-transition-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #2c2c2c; /* Negro mate */
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease-in-out;
    }
    .page-transition-active .page-transition-overlay {
        opacity: 1;
    }
    .page-transition-overlay .loading-text {
        color: white;
        font-size: 24px;
        margin-top: 20px;
        text-align: center;
    }
    .page-transition-overlay .progress-circle {
        width: 50px;
        height: 50px;
        border: 5px solid rgba(255, 255, 255, 0.3);
        border-top: 5px solid white;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    </style>
    ';
}
add_action('wp_head', 'custom_page_transition_css');

// Añadir JavaScript para manejar la transición con texto dinámico y círculo de progreso
function custom_page_transition_js() {
    echo '
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        // Crear el overlay para la transición y añadirlo al DOM
        var transitionOverlay = document.createElement("div");
        transitionOverlay.className = "page-transition-overlay";
        
        var loadingText = document.createElement("div");
        loadingText.className = "loading-text";
        loadingText.innerText = "Cargando..."; // Texto por defecto
        
        var progressCircle = document.createElement("div");
        progressCircle.className = "progress-circle";
        
        transitionOverlay.appendChild(progressCircle);
        transitionOverlay.appendChild(loadingText);
        document.body.appendChild(transitionOverlay);
        
        var links = document.querySelectorAll("a");
        for (var i = 0; i < links.length; i++) {
            links[i].addEventListener("click", function(e) {
                var target = e.currentTarget;

                // Si el enlace apunta a una nueva página, aplica la transición
                if (target.href && !target.href.includes("#") && target.href !== window.location.href) {
                    e.preventDefault();

                    // Inicia la transición de inmediato
                    document.body.classList.add("page-transition-active");

                    // Cambia a la nueva página después de una breve demora
                    setTimeout(function() {
                        // Hacer una solicitud para obtener el título de la página destino
                        fetch(target.href)
                            .then(response => response.text())
                            .then(data => {
                                // Crear un documento HTML temporal para extraer el título
                                var tempDocument = document.createElement("html");
                                tempDocument.innerHTML = data;
                                var newPageTitle = tempDocument.querySelector("title").innerText;
                                
                                // Actualizar el texto de carga con el título de la nueva página
                                loadingText.innerText = "Cargando... " + newPageTitle;

                                // Redirigir a la nueva página después de que se complete la animación
                                window.location.href = target.href;
                            });
                    }, 100); // Pequeña espera antes de redirigir
                }
            });
        }
    });
    </script>
    ';
}
add_action('wp_footer', 'custom_page_transition_js');

Lenguaje del código: PHP (php)

Personaliza tu Preloader

Una de las ventajas de utilizar este preloader es la facilidad con la que puedes personalizarlo según el estilo de tu sitio web. Aquí te explico cómo modificar los aspectos clave del código:

Cambiar el Color de Fondo

El color de fondo del preloader se encuentra en la propiedad background-color dentro de la clase .page-transition-overlay. Puedes cambiar el color actual por el que mejor se ajuste a tu diseño, utilizando un código de color hexadecimal.

Modificar el Color del Texto

El color del texto que aparece durante la carga está definido en la clase .loading-text, dentro de la propiedad color. Puedes personalizarlo para que el texto tenga el color que desees.

Personalizar la Transición

La transición de la página está controlada por la propiedad transition, que se encuentra en las clases body y .page-transition-overlay. Aquí puedes ajustar la duración de la transición, así como el tipo de efecto que prefieras (como ease-in-out o linear).

Cambiar el Estilo del Círculo de Progreso

El estilo del círculo de progreso está configurado en la clase .progress-circle. Puedes modificar propiedades como border para cambiar el color y el grosor del borde del círculo, ajustando su apariencia según tus necesidades.

Personalizar el JavaScript

El JavaScript controla cómo se comporta el preloader y la transición entre páginas. Aquí te explico algunos elementos clave que puedes modificar:

• Duración de la transición: La duración de la transición está controlada por el setTimeout en el JavaScript. Actualmente está configurada para esperar 1000 milisegundos (1 segundo) antes de redirigir a la nueva página. Puedes ajustar este valor para hacer la transición más rápida o más lenta.
• Texto de carga dinámico: El texto que se muestra durante la carga puede personalizarse en la sección donde se asigna loadingText.innerText. Puedes cambiar la frase predeterminada «Cargando…» por cualquier otro mensaje que prefieras.
• Eventos de clic en los enlaces: El JavaScript está programado para iniciar la transición cuando un usuario hace clic en un enlace. Si deseas cambiar el comportamiento (por ejemplo, excluir ciertos enlaces o incluir otros elementos), puedes modificar la lógica en la parte donde se agregan los addEventListener a los enlaces.

Tipos de Transiciones que Puedes Usar

Puedes experimentar con diferentes tipos de transiciones, como fade, slide, o zoom, ajustando la propiedad transition en las clases correspondientes para lograr el efecto deseado.

Otras Personalizaciones

Además, puedes modificar otras propiedades como el tamaño del texto en la clase .loading-text, el grosor del borde del círculo en .progress-circle, o incluso agregar una imagen de fondo en lugar de un color sólido en .page-transition-overlay.

Personalizar un preloader no solo añade un toque profesional a tu sitio web, sino que también mejora significativamente la experiencia del usuario. Con ajustes simples en las propiedades de CSS, puedes adaptar este preloader para que refleje la identidad visual de tu marca y ofrezca transiciones suaves y atractivas. No importa si no eres un experto en programación, estos cambios son accesibles y fáciles de implementar, permitiéndote destacar en un entorno digital cada vez más competitivo. ¡Dale a tu sitio web el acabado profesional que merece!

Nos vemos en el siguiente tutorial.

Un saludo.