动态背景颜色变化

Question

我在我的投资组合网站上工作，它基于 fullpage.js 和 WordPress。 我想通过更改自定义“背景颜色”来固定背景。

• 我为每个带有自定义字段的帖子添加了不同的“背景颜色”。

• 我更改了整页内可见部分（帖子）的类名
  脚本，可见帖子获得“活动”类。

我知道fullpage.js 不允许使用固定元素，所以我必须在整页包装器（以及 WordPress 循环）之外放置一些“背景”div。 我不知道如何将“背景颜色”从可见（“活动”类）部分复制到单独 div 中的固定背景。 有一些可能性：

• 使用 js/jQuery 将 CSS“背景颜色”值从一个（类“活动”）div 复制到另一个（固定背景 div），但必须动态完成。如何？我发现和测试的所有脚本仅对第一个“活动”背景颜色有效，并且当部分更改（另一个 div 为“活动”）时，固定背景仍然具有第一个活动部分背景颜色。

• 或在循环外使用带有自定义查询的 php - 但我不知道如何使用特定的类名“活动”进行过滤。我只有基本脚本：

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

如何为“活动”类添加过滤器？

还有其他想法吗？救命！

EDIT2：我找到了两个可以满足我需求的脚本：

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

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

两者都将背景颜色从“源”div 复制到第二个“目标”div。我可以将“源” div 保留在 wordpress 循环中（也是整页包装器），并将背景颜色值传输到 WP 循环和整页之外的固定背景 div。 第一个脚本适用于滚动事件 - 所以它可能不适用于不滚动内容的 fullpage.js 插件。 但是第二个脚本完全按照我的需要完成了他的工作。我测试过了。

所以问题是：可以用更简单的方式完成吗？没有额外的 jQuery 插件（in-view.js）？只是普通的 JS 或 jQuery？

Answer 1

所以，您将在一个页面上显示各种博客文章，并希望每个文章都有自己的背景颜色，对吗？如果是这样，请尝试 fullpage.js 的 sectionColor 选项。

你可以在这里阅读 https://github.com/alvarotrigo/fullPage.js#options

这是该页面中的一个示例：

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

文档没有准确解释这里发生了什么，但看起来您只是按照它们的出现顺序发送了一组部分颜色。

根据评论进行编辑：

从你的照片中，我想我更能理解你想要做什么。基本上你想要一个幻灯片层（透明）和一个固定的背景层（活动幻灯片的颜色）。首先，这个平行的例子是你想要实现的吗？ https://alvarotrigo.com/fullPage/extensions/parallax.html#firstPage

如果是这样，回购中有一个基本示例。如果这不能完全完成您想要做的事情，请按照以下说明操作：

1. 使用 onLeave 或 afterLoad 回调向您的网站发出 ajax 请求。
2. 使用您的帖子 ID 查询您的帖子以检索帖子属性背景。
3. 检索背景颜色并设置/淡入您的背景颜色属性。

这是一个使用 jQuery 的非常简单的 ajax 请求示例：

//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);
      });
}

我只是基于文档，传入的索引可能是任意顺序或来自 Wordpress 的帖子 ID。我不确定，因此您可能必须从 dom 中的属性中获取帖子 ID。