Change background colors with smoothState.js

Question

I have a test site with 5 pages, each page has a different background colour depending on the page you are on.

When I use the default settings that come with smoothState.js, the background colour does not refresh as it's set to the body of the page, if I press F5 then yes I see that pages colour. Is it possible to get the background colours to change depending on the page you are on using smoothState.js?

smoothState.js options:

$(function(){
  'use strict';
  var options = {
    prefetch: true,
    cacheLength: 2,
    onStart: {
      duration: 250, // Duration of our animation
      render: function ($container) {
        // Add your CSS animation reversing class
        $container.addClass('is-exiting');

        // Restart your animation
        smoothState.restartCSSAnimations();
      }
    },
    onReady: {
      duration: 0,
      render: function ($container, $newContent) {
        // Remove your CSS animation reversing class
        $container.removeClass('is-exiting');

        // Inject the new content
        $container.html($newContent);

      }
    }
  },
  smoothState = $('#main').smoothState(options).data('smoothState');
});

CSS:

.home{
  background-color: #000000;
}

.about{
  background-color: #efefef;
}

.faq{
  background-color: #999999;
}

.prices{
  background-color: #666666;
}

.contact{
  background-color: #333333;
}

Answer 1

You can use your css classes on the smoothState container element instead of the body. Then you can use the onAfter option. It runs after the new content has been injected into the page and all animations are complete. With Jquery you can search if there is a certain css class and if so change the css of the body.

In short:

    onAfter: function() {
        if ($('.container').hasClass('home')) {
                $('body').css('background-color', '#000000');
        }
    }

In your particular case:

1. Add your css classes to the respective smoothState container elements:

   <div class="container scene_element scene_element--animation home">
   
   <div class="container scene_element scene_element--animation about">
   
   <div class="container scene_element scene_element--animation faq">
   
   <!-- etc. -->
   

2. Check if the container has a certain class and then apply the background color to the body. Repeat for all your pages and add it to onAfter in your smoothState options:

   onAfter: function() {
   
       if ($('.container').hasClass('home')) {
               $('body').css('background-color', '#000000');
       }
   
       if ($('.container').hasClass('about')) {
               $('body').css('background-color', '#efefef');
       }
   
       if ($('.container').hasClass('faq')) {
               $('body').css('background-color', '#999999');
       }
   
       // etc.
   
   }
   

Make sure to remove the css classes from your body element because otherwise smoothState will still remember the class of the first page you visit for all other pages. You can also get rid of your css rules.

If a user has JavaScript deactivated all of this won’t work. Simply put something like this in the head of each page. This way it won’t interfere with smoothState:

    <!-- home.html -->
    <noscript>
        <style type="text/css">
            body {
                background-color: #000000;
            }
        </style>
    </noscript>

    <!-- about.html -->
    <noscript>
        <style type="text/css">
            body {
                background-color: #efefef;
            }
        </style>
    </noscript>

    <!-- etc. -->