I was wondering if anybody has a swell solution for the following:
I want the background color of my website to transition from one page to the next. Meaning:
mypage.com/index background is red. User clicks a link and gets to ...
mypage.com/greenpage background is initially red and fades to green after page load. User click a link and gets to ...
mypage.com/orangepage background is initially green and fades to orange ... and so on.
What I am doing now is:
Save the current background color in the session
$_SESSION['bg_old'] = $page->bg;
On the next page, I assign it to the body:
<body style="background-color:<?php echo $_SESSION['bg_old']; ?>">
And finally change it with js:
window.onload = function() {
var body = document.querySelector('body');
body.style.transition = 'all 3s ease-out';
body.style.background = bg_new;
}
(I left out some code, but the principle should be visible).
This works, but it feels pedestrian. Has anybody done this in a slicker way?
Can't have any one-page or jQuery solutions.
Thx all!!
With your approach, as @appleapple pointed out, when you open multiple tabs your colors would jump.
What you can do instead is to save bg_old on mouse move (Make AJAX request to some PHP file that saves color inside session. You can minimize the amount of request by sending one request after page loads, then another one after page unfocus and focuses back). And keep rest of the code the same. This way when you open second tab with different color and switch back to the first one transition still would be consistent.