Animate Any
Integra la biblioteca animate.css para aplicar animaciones CSS a cualquier elemento de tu sitio Drupal a través de una interfaz administrativa.
animate_any
Instalar
composer require 'drupal/animate_any:^3.1'
composer require 'drupal/animate_any:8.x-1.6'
Overview
Animate Any es un módulo de Drupal que lleva el poder de la popular biblioteca animate.css a tu sitio web sin requerir conocimientos de programación. Proporciona una interfaz administrativa fácil de usar donde los constructores de sitios pueden aplicar más de 60 animaciones CSS diferentes a cualquier elemento DOM en su sitio.
El módulo funciona permitiendo a los administradores especificar elementos padre (usando selectores de clase CSS o ID) y luego definir secciones hijas dentro de esos padres que deben recibir animaciones. Cada animación puede activarse por varios eventos, incluyendo carga de página, desplazamiento hacia la vista, clic, hover y otras interacciones del ratón.
Las configuraciones de animación se almacenan en una tabla de base de datos y pueden exportarse al sistema de gestión de configuración de Drupal, facilitando el despliegue de configuraciones de animación en diferentes entornos (desarrollo, staging, producción).
Features
- Aplicar animaciones CSS a cualquier elemento DOM usando selectores de clase o ID sin escribir código
- Más de 60 efectos de animación incluyendo rebote, desvanecimiento, volteo, rotación, zoom, deslizamiento y animaciones especiales
- Múltiples opciones de eventos de activación: carga de página, desplazamiento hacia la vista, clic, hover, entrada/salida del ratón, ratón arriba/abajo y movimiento del ratón
- Vista previa en vivo de animaciones en el formulario de administración al seleccionar tipos de animación
- Estructura de animación jerárquica con elementos padre que contienen múltiples secciones hijas animadas
- Formulario dinámico con AJAX para agregar y eliminar filas de animación sin recargar la página
- Exportar configuraciones de animación desde la base de datos a la configuración activa de Drupal para control de versiones y despliegue
- Importar configuraciones de animación desde la configuración activa de vuelta a la base de datos para sincronización multi-entorno
- Detección automática de viewport para animaciones activadas por desplazamiento para asegurar que las animaciones se reproduzcan cuando los elementos sean visibles
- Las clases de animación se eliminan automáticamente después de 1 segundo para animaciones repetibles activadas por eventos
Use Cases
Animar sección hero al cargar la página
Agregar una animación de desvanecimiento a la sección hero de tu página de inicio. Establecer el elemento padre como 'body.front' o la clase body de tu página de inicio, agregar identificador hijo '.hero-section', seleccionar evento 'Al cargar la página' y elegir animación 'Fade In'. El contenido hero aparecerá gradualmente cuando los visitantes lleguen a tu página de inicio.
Revelar secciones de contenido al desplazarse
Crear animaciones de desplazamiento atractivas para secciones de contenido. Usar '#main-content' como padre, agregar identificadores como '.content-block', seleccionar evento 'Al desplazar la página' y elegir animaciones como 'Slide In Up' o 'Fade In Up'. A medida que los usuarios se desplazan hacia abajo, cada bloque de contenido se anima al entrar en la vista.
Efectos hover interactivos en botones
Agregar efectos hover llamativos a botones de llamada a la acción. Establecer padre como '.cta-wrapper' o contenedor similar, agregar '.cta-button' como identificador, seleccionar evento 'Hover' y elegir animación 'Pulse' o 'Rubber Band'. Los botones se animarán cuando los usuarios pasen el ratón sobre ellos, incentivando clics.
Animaciones de retroalimentación activadas por clic
Proporcionar retroalimentación visual cuando los usuarios hacen clic en elementos. Para un botón de me gusta, usar selector padre que contenga el botón, agregar el identificador del botón, seleccionar evento 'Clic' y elegir animación 'Bounce' o 'Tada'. El elemento se anima al hacer clic, proporcionando retroalimentación satisfactoria al usuario.
Desplegar animaciones entre entornos
Configurar animaciones en desarrollo, luego usar Exportar para guardar a configuración activa. Usar la Sincronización de Configuración de Drupal para exportar a archivos. En staging/producción, importar los archivos de configuración y usar la pestaña Importar para poblar la base de datos. Todas las animaciones ahora son consistentes entre entornos.
Animar elementos del menú de navegación
Agregar animaciones sutiles a elementos de navegación. Usar el contenedor de navegación como padre, agregar identificadores de elementos del menú, seleccionar evento 'Entrada del ratón' y elegir una animación sutil como 'Swing' o 'Shake'. Los elementos del menú se animan cuando los usuarios pasan el ratón sobre ellos, añadiendo refinamiento a la experiencia de navegación.
Tips
- Siempre limpiar todas las cachés después de instalar el módulo y la biblioteca animate.css
- Usar selectores padre específicos para limitar dónde se aplican las animaciones - selectores amplios como 'body' pueden causar animaciones no deseadas
- Para animaciones de desplazamiento, asegurar que los elementos objetivo estén debajo del pliegue para que los usuarios vean activarse la animación
- La vista previa en vivo en el formulario de administración muestra animaciones en el encabezado 'ANIMATE ANY' - usar esto para previsualizar antes de guardar
- Los identificadores con el mismo elemento padre se fusionan automáticamente en una sola fila de base de datos para organización
- Las animaciones activadas por eventos (clic, hover, etc.) se reinician automáticamente después de 1 segundo, permitiendo animaciones repetidas
- Usar la función Exportar/Importar al mover sitios entre entornos para mantener consistencia en las animaciones
- El módulo advierte si falta la biblioteca animate.css - verificar que existe /libraries/animate_any/animate.css
Technical Details
Admin Pages 6
/admin/config/animate_any
Página principal de configuración para agregar nuevas animaciones CSS a elementos del sitio web. Esta página te permite definir un elemento padre y agregar múltiples secciones hijas con sus animaciones y eventos de activación.
/admin/config/animate_any/list
Muestra una tabla paginada de todas las animaciones configuradas con sus elementos padre e identificadores hijos. Proporciona operaciones de edición y eliminación para cada configuración de animación.
/admin/config/animate_any/edit/{element}
Formulario de edición para modificar configuraciones de animación existentes. Pre-llenado con los valores actuales del elemento padre y todas las animaciones de secciones hijas.
/admin/config/animate_any/delete/{id}
Página de confirmación para eliminar permanentemente una configuración de animación tanto de la base de datos como de la configuración activa.
/admin/config/animate_any/import
Importa configuraciones de animación desde la configuración activa de Drupal a la tabla de la base de datos. Útil para desplegar configuraciones desde control de versiones o sincronizar desde otro entorno.
/admin/config/animate_any/export
Exporta configuraciones de animación desde la base de datos a la configuración activa de Drupal. Después de exportar, usar Sincronización de Configuración para exportar a tu directorio de sincronización para control de versiones.
Permisos 1
Hooks 1
hook_page_attachments
Adjunta la biblioteca animate_any/animate y pasa los datos de configuración de animación como JSON a JavaScript en cada página.
Troubleshooting 5
Descargar animate.css desde https://github.com/daneden/animate.css y colocar el archivo animate.css en /libraries/animate_any/animate.css. La ruta completa debe ser DRUPAL_ROOT/libraries/animate_any/animate.css.
Limpiar todas las cachés primero. Verificar que la biblioteca animate.css esté correctamente instalada. Comprobar que tu selector padre existe en la página y que los identificadores hijos son correctos. Usar herramientas de desarrollador del navegador para verificar que los elementos existen y comprobar errores de JavaScript en la consola.
Las animaciones de desplazamiento solo se activan cuando el elemento se vuelve visible en el viewport. Si el elemento ya es visible al cargar la página, la animación puede activarse inmediatamente. Colocar elementos animados debajo del viewport inicial, o usar 'Al cargar la página' para elementos sobre el pliegue.
Para animaciones activadas por eventos (clic, hover, etc.), las clases de animación se eliminan automáticamente después de 1 segundo para permitir animaciones repetidas. Las animaciones de desplazamiento y carga de página intencionalmente se reproducen solo una vez. Si necesitas animaciones de desplazamiento repetibles, considera usar un evento de clic o hover en su lugar.
Asegurarse de seguir el flujo de trabajo correcto: Exportar guarda la base de datos a la configuración activa (no al directorio de sincronización). Luego necesitas usar la Sincronización de Configuración de Drupal para exportar a archivos. Para importar, primero sincronizar archivos de configuración a la configuración activa, luego usar la pestaña Importar para poblar la base de datos.