页面介绍 - 正文淡入答案

【问题标题】：Page intro - body fade in页面介绍 - 正文淡入
【发布时间】：2014-12-23 13:04:54
【问题描述】：

我有一个 wordpress 网站，我正在使用 supersized 插件来全屏显示背景图像滑块。

我想在正文加载所有网站内容之前显示静态全屏背景图像。

现在，我已经添加了这个 HTML：

<html class="no-js">

（我在html标签中添加了类no-js）

在 css 中，我添加了这一行：

.js body { display: none; }

在页脚，我添加了这个 jQuery 代码：

<script>
  jQuery('body').fadeIn(5000); // fadein time in ms
</script>

从这里开始，我不知道如何继续。

我尝试使用 jquery 显示背景，但是...如果我隐藏正文 - 在 jQuery 加载它之前，我实际上无法执行任何操作，对吗？有哪些替代方案？

【问题讨论】：

你当前的代码结果如何？
全身隐藏，5000 毫秒后淡入。我想要 - 在身体完全淡入之前，显示全屏背景图像。
我不确定我是否清楚你想要什么。在正文完全加载之前显示图像？为什么不为这个背景设置单独的 div（绝对 100%）而为其他内容单独设置一个？当然都在体内？可以显示5s的背景，然后隐藏并显示其他的东西
因此我需要在我的桌子上放一只黄色鸭子。有时大脑的使用率为 101%。
@trainoasis 所以，根据你的建议......如果我在页面上有这样的 div：#nav、#footer、#header ...我需要将它们全部隐藏并显示#first -bg，并且只有在 5s 之后隐藏它并显示其余部分？

标签： jquery css html wordpress

【解决方案1】：

从此更改您的 HTML：

<body>
    *your content*
<body>

到这里：

<body>
    <div id="bgimage"></div>
    <div id="content">*your content*</div>
<body>

将此css添加到#bgimage：

#bgimage { position: absolute; width: 100%; height: 100%; background-image: url(*image url*); background-size: cover; }

当你淡出#bgimage时，淡入#content，而不是淡入正文。

我认为这就是@trainoasis 他们评论的意思。

【讨论】：

【解决方案2】：

你可以试试这样的：

    $(function() {
      window.setTimeout(function() {
        $('body').removeClass('preload'); //remove class preload to hide the image
      }, 5000);
    });

    body,
    html {
      height: 100%;
      width: 100%;
      position: relative;
    }
    body.preload:after {
      content: " ";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: url(/* Your image */) no-repeat center center/100% 100% #000;
      z-index: 999;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class="preload">
  <h3>content of body...</h3>
</body>

添加和删除类预加载可以解决问题，因为 css 伪元素基于此类。

希望对你有帮助

我创建了一个fiddle 来展示上面的代码

【讨论】：