Question

正如前一个问题（Using CSS for fade-in effect on page load）中已经提到的那样用户询问如何执行http://dotmailapp.com/的淡入效果。

我发现这个问题非常有用，但我还有一些要补充的内容。如果您现在访问该网站，您将看到一个淡入，但同时对象像一个滴，我检查了他们的CSS和我发现的内容写在下面的代码框但我不知道如何应用这个我的网站。

那么我需要他们特定的JS文件吗？（我不明白/* **** no-js **** */ ...正在做什么。）

/* **** for startanimation awesomeness **** */
.logo {
   position: relative;
   top: -50px;
   opacity: 0;
}
h1 {
   opacity: 0;
   position: relative;
   top: -30px;
}
header .subline {
   opacity: 0;
   position: relative;
   top: -30px;
}
.mailchimp {
   opacity: 0;
   position: relative;
   top: -30px;
}
.abovethefold .col {
   opacity: 0;
}
.browser {
   opacity: 0;
   position: relative;
   top: -50px;
}
.belowthefold {
   opacity: 0;
}

/* **** no-js **** */
.no-js .logo {
   position: relative;
   top: 0px;
   opacity: 1;
}
.no-js h1 {
   opacity: 1;
   position: relative;
   top: 0px;
}
.no-js  header .subline {
   opacity: 1;
   position: relative;
   top: 0px;
}
.no-js .mailchimp {
   opacity: 1;
   position: relative;
   top: -30px;
}
.no-js .abovethefold .col {
   opacity: 0;
}
.no-js .browser {
   opacity: 1;
   position: relative;
   top: 0px;
}
.no-js .belowthefold {
   opacity: 1;
}

Answer 1

如果您仔细查看其网站代码，您会发现他们正在使用Modernizr进行浏览器功能检测。这样做是根据浏览器的功能将html上的类加载。

在HTML中，他们有以下内容：

<html class="no-js" lang="en">

当启用JS时，此类被剥离并替换为js并且它们运行一些脚本以将元素从负顶部值设置为动画。当未启用JS时，类{{1单独留下并用作您发布的第二个代码块的CSS挂钩 - 实质上是将元素从第一个代码块中的负顶部值重置为0。

Answer 2

这是您问题的最简单的解决方案..

<!DOCTYPE HTML>
<HTML>
<head>
  <title> Fade In On Page Load </title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("#test").fadeIn(5000)
})
</script>
</head>

<body>
  <div id="test>
    <p>This Is A Test</p>
  </div>
</body>
</html>

对页面加载的淡入效果

2 个答案: