Question

Not sure if this is possible, I am trying to put a novel type document on a html page, I would like the background to stay the same for each chapter, but once they scroll down far enough to the next chapter, the background needs to change to that chapter’s (the change could be instant or smoothly doesn’t matter)

Any hints?

Answer 1

Of course using the jQuery library…

in your header or footer you include the jquery library…

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

then you include this chunk after the script above…

    <script type="text/javascript">
    $(document).ready(function(){
        bg.init();

        $(window).scroll(function(){        
                bg.updateBG();
        });
    });

    var bg = {
    current_image: 'chapter_1',
    offsets: new Array(),
    init: function(){
        $('.chapter').each(function(){
            bg.offsets.push($(this).height());
        });
    },
    updateBG: function(){
        var offset = $(window).scrollTop();
        var total = bg.offsets.length;
        var current_image;
        var chapter = 1;

        for(var i = 0; i < total; i ++)
        {
            if(offset > bg.offsets[i])
            {
                chapter = (i + 1);
                current_image = 'chapter_' + chapter;
                // this will leave the last image overwrite as the current image
            }
        }

        if(current_image != bg.current_image)
             {
                  $('body').css('background', 'url(/path-to-image/' + current_image + '.jpg) no-repeat center center');
                  bg.current_image = current_image;

                  // only update if a change is noticed
             }
        }
    };
        </script>

here is sample html to make sense of this convoluted JS…

<div id="container">
    <div class="chapter" id="chapter_1">
        some content
    </div>
    <div class="chapter" id="chapter_2">
        some content
    </div>
    <div class="chapter" id="chapter_3">
        some content
    </div>
</div>

Where your content is in the #container element, obviously. Also, update the path to the real image. There are smoother ways to transition, but you can decide how you want to do that then ask for specifics.

Also, the window height divided by 2 is so you swap images midway through the page at the bottom. I found it is smoother this way for the projects I used this on.