Me preguntaba si alguien tiene una solución excelente para lo siguiente: quiero que el color de fondo de mi sitio web pase de una página a la siguiente. Sentido:
El fondo de mypage.com/index es rojo . El usuario hace clic en un enlace y llega a...
El fondo mypage.com/greenpage es inicialmente rojo y se desvanece a verde después de cargar la página. El usuario hace clic en un enlace y llega a... mypage.com/orangepage fondo es inicialmente verde y se desvanece a naranja ... y así sucesivamente.
Lo que estoy haciendo ahora es:
Guardar el color de fondo actual en la sesión
$_SESSION['bg_old'] = $page->bg;
En la página siguiente, lo asigno al cuerpo:
<body style="background-color:<?php echo $_SESSION['bg_old']; ?>">
Y finalmente cambiarlo con js:
window.onload = function() { var body = document.querySelector('body'); body.style.transition = 'all 3s ease-out'; body.style.background = bg_new; } (Omití algo de código, pero el principio debería ser visible).
Esto funciona, pero se siente peatonal. ¿Alguien ha hecho esto de una manera más hábil? No puede tener ninguna solución de una página o jQuery.
¡¡Gracias a todos!!
Con su enfoque, como señaló @appleapple, cuando abre varias pestañas, sus colores saltan.
En su lugar, lo que puede hacer es guardar bg_old al mover el mouse (haga una solicitud AJAX a algún archivo PHP que guarde el color dentro de la sesión). ). Y mantén el resto del código igual. De esta manera, cuando abra la segunda pestaña con un color diferente y vuelva a cambiar a la primera, la transición seguirá siendo consistente.