动态背景色变化

Question

I work on my portfolio website, it's based on a fullpage.js and WordPress. I would like to have fixed background with changing custom "background-color".

• I add different "background-color" to every post with a custom field.

• I change class name for visible section (post) inside a full page
  script, visible post gets class "active".

I know that fullpage.js doesn't allow fixed elements, so I have to put some "background" div outside of full page wrapper (and WordPress loop too). I don't know how to copy that "background-color" from a visible (class "active") section to a fixed background in a separate div. There are some possibilities:

• use js/jQuery to copy CSS "background-color" value from one ( class "active") div to another(fixed background div), but it has to be done dynamically. How? All scripts I found and tested works only once for first "active" background-color, and when section change (another div is "active") fixed background still has the first active section background-color.

• or use php with custom query outside a loop - but I don't know how to filter with a specific class name "active". I have only basic script:

   style="background-color:<?php global $wp_query; $postid = $wp_query->post->ID; echo get_post_meta($postid, 'background', true); wp_reset_query(); 

how to add a filter for "active" class?

Any other ideas? Help!

EDIT2 : I found two scripts which do what I need:

1 https://codepen.io/Funsella/pen/yLfAG

2 https://codepen.io/Funsella/pen/dpRPYZ

both change the background-color copying it from "source" div to second "target" div. I can keep "source" div inside a wordpress loop (fullpage wrapper too) and transfer the background-color value to my fixed background div outside of WP's loop and fullpage. First script works with scroll events - so it probably won't work with fullpage.js plugin which doesn't scroll content. But the second script does his job exactly how I needed. I tested it.

So the question is: can it be done in more simple way? Without additional jQuery plugin (in-view.js)? Just plain JS or jQuery?

Answer 1

So, you'll be showing various blog posts on a single page and want each one to have its own background color, correct? If so, try fullpage.js' sectionsColor option.

You can read about it here https://github.com/alvarotrigo/fullPage.js#options

Here's an example from that page:

$('#fullpage').fullpage({
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});

The documentation doesn't explain precisely what's happening here, but it looks like you're simply sending in an array of section colors in order of their appearance.

EDIT BASED ON COMMENTS:

From your picture I think I better understand what you're trying to do. Basically you want a slide layer (transparent) and a fixed background layer (color of active slide). First, is this parallex example what you're trying to achieve? https://alvarotrigo.com/fullPage/extensions/parallax.html#firstPage

If so, there is a basic example in the repo. If this won't accomplish exactly what you're trying to do, follow these directions:

1. Use the onLeave or afterLoad callback to make an ajax request to your site.
2. Query your posts using your post Id to retrieve the post attribute background.
3. Retrieve the background color and set/fade-in your background-color property.

Here's a very simple ajax request example using jQuery:

//set the function to perform for onLeave in the options
onLeave: goGetThatColor(index)

//not in your options
function goGetThatColor(index){
    $.ajax({
      method: "POST",
      url: "get_post_color.php",
      data: { id: index }
    })
      .done(function( color ) {
        $(#background-element).css('background-color', color);
      });
}

I'm just going based off of the documentation, the index that's passed in might be an arbitrary ordering or the post id from Wordpress. I'm not sure about that so you might have to grab the post id from an attribute in your dom.