How to change background when scrolling down? WordPress

1 Views

I want to reproduce an effect used here http://www.ixistore.be/. I mean changing the background color by scrolling down the page. I know how to do it on page with static IDs and specific number of elements using for example waypoints, but u have to define IDs in JS -> . I would love to use it with wordpress –> that means dynamically. I assume that each post would have some attribute “data-bgcolor” and that would be used by javascript. But I have kinda no idea how to acomplish that.
Thanks for any help.

How to change the background-color when scrolling down

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. this is not my logic, these are the scripts they are using for changing body background and this is taken from the link you provided. This may help you.

    function scrollHandler(e)
{
refreshFocus();
} 

function refreshFocus()
{
var closest_center_dist = 99999;
var $closest_block;

var max_visible_h;
var winner;

$("div.block").each(function(ind, ele)
{

    var $block = $(ele);
    var scrollTop = $(window).scrollTop();
    var ele_y = $block.offset().top - scrollTop;
    var ele_bottom_y = $block.height() + ele_y;
    var ele_h = $block.height();
    var ele_center_y = ele_y + ele_h/2;

    var win_h = $("#win_h_ref").height()//$(window).height();
    var win_center_y = win_h/2;

    var ele_top_cutoff = Math.abs(Math.min(ele_y, 0));// from 0 to ..
    var ele_bottom_cutoff = Math.abs(Math.max(ele_y + ele_h - win_h, 0));// from 0 to ..
    var visible_ele_h = ele_h - ele_top_cutoff - ele_bottom_cutoff;


    var top_center_distance = Math.abs(ele_y - win_center_y);
    var bottom_center_distance = Math.abs(ele_bottom_y - win_center_y);

    var shortest_center_distance = Math.min(top_center_distance, bottom_center_distance);
    if(shortest_center_distance < closest_center_dist)
    {
        closest_center_dist = shortest_center_distance;
        $closest_block = $block;            
    }
});

if($closest_block)
{
    if($closest_block.size() > 0)
    {
        if($closest_block.hasClass("focus") == false)
        {
            $("div.block.focus").removeClass("focus");
            $closest_block.addClass("focus");

            $('#menu li.current').removeClass('current');
            $("#menu li a").each(function()
            {
                if($(this).attr("href") == "#"+$closest_block.attr("id"))
                {
                    $(this).closest("li").addClass("current");
                }
            });

            var $bg = $($closest_block.data("background"));
            var bg_clr = $bg.css("backgroundColor");
            $("body").css({"backgroundColor":bg_clr});

        }           
    }
}

}