Ir al contenido principal
Todas las coleccionesMejores prácticas, consejos y trucosTrucos y Consejos
Aplica efectos de temporada a tus Flipbooks con scripts personalizados
Aplica efectos de temporada a tus Flipbooks con scripts personalizados

Crea efectos de temporada para mejorar tus catálogos de temporada con la función de scripts personalizados.

Actualizado esta semana

⚠️ Esta guía asume que ya sabes cómo funcionan los scripts personalizados. Si tienes dudas al respecto, visita nuestra guía antes de seguir leyendo 🚀

Si tu negocio realiza promociones de temporada, es probable que ya crees Flipbooks temáticos para cada ocasión. Pero, ¿sabías que puedes hacerlos aún más atractivos con efectos visuales y de sonido?

Así es, puedes agregar efectos divertidos a tus Flipbooks usando Custom Scripting. ¡Mira cómo funciona!

📖 Esta guía explica:

Cómo agregar efectos a tu Flipbook, incluyendo:

1. El Conejo de Pascua 🐰

Este efecto coloca un huevo de Pascua interactivo dentro de tu Flipbook. Cuando los visitantes exploran el catálogo, serán sorprendidos con un conejo animado.

⚠️ Te recomendamos evitar cambiar gran parte del código a menos que tenga experiencia con JavaScript. Como se trata de una script personalizado, iPaper no puede garantizar que funcionará según lo previsto.

Añade el efecto

Para colocar este efecto en tu Flipbook, copia y pega el siguiente script en la sección Scripts en Custom Scripting:

<script src="https://viewer.ipaper.io/ViewFile1979188.js"></script>

<script>
let bunnyColor = "#fff";
let ribbonColor= "#C02325";
let bowtieColor = "#e93d40";
let eggColor= "#2A3586";
let eggSpotsColor= "#FFD71B";
let buttonColor = "#2A3586"
let ButtonIconColor = "#FFD71B"
let position = "left";
let scaleFactor = 2;
let showOnMobile = true
let showBunnyButton = true

window.onload = CreateBunny(bunnyColor, ribbonColor, bowtieColor, eggColor, eggSpotsColor, buttonColor, ButtonIconColor, position, scaleFactor, showOnMobile, showBunnyButton);
</script>

Para este efecto de temporada, hemos alojado los recursos en el servidor de iPaper, por lo que puedes usarlos sin necesidad de subir los tuyos. Sin embargo, si deseas cambiar los elementos visuales o de audio, deberás proporcionarlos tú mismo y editar la configuración en el script.

Configuración del script

Este efecto ofrece variables que pueden ser personalizadas para adaptar la experiencia a tu marca:

  • bunnyColor: Define el color del conejo. Usa un código hexadecimal entre comillas (ejemplo: "#FF69B4" para rosa).

  • ribbonColor: Define el color del listón. Usa un código hexadecimal entre comillas (ejemplo: "#FF6347" para rojo tomate).

  • bowtieColor: Define el color del moño. Usa un código hexadecimal entre comillas (ejemplo: "#4682B4" para azul acero).

  • eggColor: Define el color del huevo. Usa un código hexadecimal entre comillas (ejemplo: "#FFFF00" para amarillo).

  • eggSpotsColor: Define el color de los puntos del huevo. Usa un código hexadecimal entre comillas (ejemplo: "#32CD32" para verde lima).

  • buttonColor: Define el color principal del botón que muestra al conejo. Usa un código hexadecimal entre comillas (ejemplo: "#FFA500" para naranja).

  • buttonIconColor: Define el color del ícono en el botón que muestra al conejo. Usa un código hexadecimal entre comillas (ejemplo: "#FFFFFF" para blanco).

  • position: Determina la posición del conejo y del botón. Acepta "left" (izquierda) o "right" (derecha), siempre entre comillas.

  • scaleFactor: Controla el tamaño del huevo y el conejo. Usa un número sin comillas:

    • 1 representa el tamaño original (100%).

    • 2 representa el doble del tamaño original (200%).

  • showOnMobile: Define si el huevo será visible en dispositivos menores a 693px. Usa true o false sin comillas:

    • true: El huevo será visible a la mitad de su tamaño.

    • false: El huevo no será visible en dispositivos móviles.

  • showBunnyButton: Define si aparecerá un botón para volver a mostrar el conejo después de cerrarlo. Usa true o false sin comillas:

    • true: Aparecerá un botón.

    • false: No habrá botón.

Recuerda guardar los cambios para que el efecto se active en tu Flipbook.

2. El efecto de copos de nieve

Este tutorial te muestra cómo crear un botón flotante que permite activar y desactivar:

  • Una pista de audio

  • Un efecto visual de nieve

⚠️ Recomendación: Evita modificar demasiado el código si no tienes experiencia con JavaScript. Este es un script de terceros, por lo que iPaper no ofrece soporte ni garantiza que funcione correctamente.

Añade el efecto

Este script usa recursos alojados en el servidor de iPaper, como la imagen del botón flotante y la pista de audio.

Solo copia y pega el siguiente código en el campo Scripts dentro de Custom Scripting en iPaper:

<script src="https://viewer.ipaper.io/ViewFile1700200.js"></script>

<script>
// Define the URL for the "Effect Off" icon 
var iconOFF = 'https://viewer.ipaper.io/ViewFile1699866.svg'; 

// Define the URL for the "Effect On" icon 
var iconON = 'https://viewer.ipaper.io/ViewFile1699865.svg';

// Specify the URL for the background music 
var soundURL = 'https://viewer.ipaper.io/ViewFile1934158.mp3';

// Set the autoStart option (true to enable, false to disable) 
// Enabling this option will disable the Call to Action (CTA) and background music 
var autoStartSnowFall = false; 

</script>

Para este efecto de temporada, hemos alojado los recursos en el servidor de iPaper, por lo que puedes usarlos sin necesidad de subir los tuyos. Sin embargo, si deseas cambiar los elementos visuales o de audio, deberás proporcionarlos tú mismo y editar la configuración en el script.

Configuración del script

Puedes alojar tus archivos en cualquier servidor externo o, preferiblemente, subirlos a tu Media Library en iPaper. Para personalizar tu efecto de temporada, modifica estos valores en el código:

  • iconOFF: Imagen que se mostrará cuando el efecto esté desactivado. Cambia la URL dentro de las comillas (' ').

  • iconON: Imagen que se mostrará cuando el efecto esté activado. Cambia la URL dentro de las comillas (' ').

  • soundURL: Audio que se reproducirá cuando el efecto esté activado. Cambia la URL dentro de las comillas (' ').

  • autoStartSnowFall:

    • true → El efecto de nieve se activará automáticamente cuando el usuario entre en el Flipbook. ❄️

    • false → El usuario podrá activarlo o desactivarlo manualmente con el botón flotante.

⚠️ Importante: Si activas autoStartSnowFall = true; el usuario no podrá detener o reiniciar el efecto manualmente.

Una vez que hayas pegado el código y guardado los cambios, ¡el efecto de nieve estará activo en tu Flipbook!

3. El efecto de corazones 💕

Este script utiliza recursos alojados en la web, como la imagen del botón flotante y la animación de corazones.

Solo copia y pega el siguiente código en el campo Scripts dentro de Custom Scripting en iPaper:

<script src="https://cdn.jsdelivr.net/npm/tsparticles@2.9.3/tsparticles.bundle.min.js"></script> 

<script src="https://cdn.jsdelivr.net/npm/tsparticles-shape-heart@2.9.3/tsparticles.shape.heart.min.js"></script> 

<script src="https://viewer.ipaper.io/ViewFile1762423.js"></script>

Guarda los cambios y listo. ¡Ahora tu Flipbook mostrará un lindo efecto de corazones flotantes!

4. El efecto confeti

Este efecto es fácil de implementar y ofrece un alto nivel de personalización, permitiéndote modificar:

  • La cantidad de confeti

  • El tamaño del confeti

  • Los colores del confeti

Solo copia y pega el siguiente código en el campo Scripts dentro de Custom Scripting en iPaper:

<script>
let autoStartConfetti = true;
let confettiColors = ["#223D34","#446B5F", "#fafafa"];
let confettiScale = 1;
let confettiInterval = 100; 
 createConfetti(autoStartConfetti, confettiColors, confettiScale, confettiInterval);
</script>

Configuración del Script

  • Si quieres que el efecto inicie automáticamente al abrir el Flipbook, deja autoStartConfetti = true. Si quieres que los visitantes lo activen manualmente con un botón en la esquina inferior derecha, cambia a false.

  • Modifica la variable confettiColors con los códigos hexadecimales de los colores que prefieras. Cada color debe ir entre comillas y separado por comas.

  • La variable confettiScale define el tamaño del confeti. Por ejemplo, 1 es el tamaño original, 1.5 es 150% más grande, 0.5 es la mitad del tamaño.
    ​

  • confettiInterval define la velocidad en milisegundos. 100 equivale a 10 piezas por segundo, 200 reducirá la cantidad generada.

Guarda los cambios y listo. ¡Tu Flipbook se llenará de confeti cuando los visitantes lo naveguen!

Experimenta los efectos de temporada en nuestros Flipbooks de muestra:

✨ Dale un toque especial a tu catálogo con un fondo temático

Si ya agregaste un efecto de temporada a tu Flipbook, ¿por qué no llevar la experiencia aún más lejos con un fondo personalizado? Un fondo temático puede hacer que tu catálogo sea aún más inmersivo y atractivo para los visitantes.

Agrega una imagen de fondo a tu Flipbook

Artículos relacionados
Scripts Personalizados: ¿Qué Son y Cómo Usarlos?
¿Ha quedado contestada tu pregunta?