Interruptor Día/Noche Animado — WEB + WordPress

$5.00

Las dos versiones en una sola compra: web (HTML, CSS y JavaScript) + plugin para WordPress. US$5.

Un interruptor animado día/noche: una pequeña figura cruza el control y, al llegar, cambia la luna por el sol (o al revés). Recibes los dos ZIP oficiales: edición web y plugin WordPress 1.0.7.

▶ Ver demostración

La demo pública funciona con ratón, toque y teclado, y respeta la opción «reducir movimiento» del sistema.

Categoría:

Descripción

/* Interruptor Día/Noche: maquetación estándar de la tienda, acotada a esta ficha por su clase propia .cn-idn-resumen (sin IDs). */body.single-product #main .product.type-product:has(.cn-idn-resumen) #tab-description>h3,body.single-product #main .product.type-product:has(.cn-idn-resumen) #tab-description .fusion-woocommerce-tab-title,body.single-product #main .product.type-product:has(.cn-idn-resumen) #tab-description .post-content>h3:first-child{display:none!important}@media (min-width:1000px){body.single-product #main .product.type-product:has(.cn-idn-resumen){display:flow-root!important}body.single-product #main .product.type-product:has(.cn-idn-resumen)>.summary,body.single-product #main .product.type-product:has(.cn-idn-resumen)>.summary>.summary-container{display:contents!important}body.single-product #main .product.type-product:has(.cn-idn-resumen)>.fusion-clearfix{display:none!important}body.single-product #main .product.type-product:has(.cn-idn-resumen)>.avada-single-product-gallery-wrapper{float:left!important;width:42%!important;max-width:none!important;margin:0!important;padding:0!important;box-sizing:border-box!important}body.single-product #main .product.type-product:has(.cn-idn-resumen) .summary .woocommerce-product-details__short-description{float:left!important;clear:left!important;width:42%!important;margin:24px 0 0!important;position:static!important;top:auto!important;left:auto!important}body.single-product #main .product.type-product:has(.cn-idn-resumen) .summary-container>:not(.woocommerce-product-details__short-description),body.single-product #main .product.type-product:has(.cn-idn-resumen)>.woocommerce-tabs{margin-left:calc(42% + 32px)!important;float:none!important;clear:none!important;width:auto!important}body.single-product #main .product.type-product:has(.cn-idn-resumen) .summary .product_title{margin-top:0!important}body.single-product #main .product.type-product:has(.cn-idn-resumen) .summary-container>:is(p.price,.avada-availability){display:block!important}body.single-product #main .product.type-product:has(.cn-idn-resumen)>.woocommerce-tabs{margin-top:24px!important}body.single-product #main .product.type-product:has(.cn-idn-resumen)>:is(.social-share,.related,.upsells){clear:both!important}body.single-product #main .product.type-product:has(.cn-idn-resumen) .woocommerce-tabs .tabs{float:none!important;width:100%!important;display:flex!important;gap:20px!important}body.single-product #main .product.type-product:has(.cn-idn-resumen) .woocommerce-tabs .tabs li{margin-right:0!important}body.single-product #main .product.type-product:has(.cn-idn-resumen) .woocommerce-tabs .panel{float:none!important;width:100%!important;padding:24px!important;margin-left:0!important;margin-right:0!important;box-sizing:border-box!important}}

Mostrar descripción

Interruptor Día/Noche Animado — WEB + WordPress

Un interruptor compacto para alternar entre apariencia nocturna y diurna, con una animación propia: una pequeña figura sale del hueco de la cápsula, camina hasta el botón y, al llegar, la luna se convierte en sol (y al revés). Una compra incluye las dos versiones: la versión web independiente (HTML, CSS y JavaScript) y el plugin para WordPress. Precio: US$5.

Cómo funciona

  • Animación completa: la caminata dura unos 2,5 segundos y el tema cambia al terminar. Las pulsaciones durante la animación se ignoran, así que no hay saltos ni cambios dobles.
  • Recuerda la elección: guarda la preferencia de cada visitante en su navegador. La primera vez sigue el tema claro u oscuro del sistema.
  • Varias instancias: si pones más de un interruptor en una página, todos se mantienen sincronizados.
  • Accesibilidad: es un conmutador real para los lectores de pantalla («Modo día», activado o desactivado), funciona con teclado (Tab, Enter y Espacio), tiene un foco visible con buen contraste en los dos temas y, con «reducir movimiento» activado, el cambio es inmediato y sin animación.
  • Compacto y adaptable: mide como máximo 170 × 78 px y se estrecha en contenedores pequeños o en el móvil.
  • Privacidad: sin recursos externos, analítica, rastreadores ni cookies. Solo guarda en el navegador la preferencia «día» o «noche».

Versión web (HTML, CSS y JavaScript)

Sin dependencias. Cargas interruptor.css e interruptor.js y copias el marcado del ejemplo incluido. Los colores se personalizan con variables CSS (--idn-*) para cada tema, y es compatible con una política de seguridad de contenidos (CSP) estricta. Incluye una página de demostración y un ejemplo mínimo de integración.

Plugin para WordPress

Shortcode [interruptor_dia_noche] para mostrar el interruptor donde quieras. Con [interruptor_dia_noche alcance="pagina"] también cambian el fondo y el color de texto de la página. Sin panel de ajustes ni datos en la base de datos; los estilos y el script solo se cargan en las páginas que usan el shortcode.

Qué recibes

Dos archivos descargables: interruptor-dia-noche-web-2026-10-29-r2.zip (versión web) e interruptor-dia-noche-wordpress-1.0.7.zip (plugin instalable desde Plugins → Añadir nuevo → Subir plugin). Cada uno incluye sus instrucciones (README.md) y la licencia GPL-2.0-or-later (archivo LICENSE).

Requisitos y límites

Versión web: un navegador actual; funciona en un hosting y también abriendo el archivo directamente. Plugin: WordPress 6.0 o superior y PHP 7.4 o superior. Probado en Microsoft Edge, Mozilla Firefox y Brave; Safari aún no se ha probado. En el modo página, los bloques con colores propios del tema no cambian, y el resultado depende del tema. No incluye página de ajustes: la personalización se hace con CSS.

Demostración: demo.creanexo.com/interruptor-dia-noche

Valoraciones

No hay valoraciones aún.

Solo los usuarios registrados que hayan comprado este producto pueden hacer una valoración.

Go to Top