js实现一个视觉滚动差异页面效果代码-html代码-BFW代码库

js实现一个视觉滚动差异页面效果代码

代码语言：html

代码描述：js实现一个视觉滚动差异页面效果代码，滚动页面试试

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  <link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  
  
  
<style>
body {
  margin: 0;
  padding: 0;
  background: black;
  color: white;
}

nav {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 35px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: .2em 2em;
  float: right;
}

nav ul li {
  display: inline-block;
  margin: 0;
  padding: .2em .7em;
}

nav a {
  width: 100%;
  height: 100%;
  color: white;
  text-decoration: none;
  font-family: Ubuntu;
  font-size: 1.15em;
  font-weight: lighter;
  letter-spacing: 1px;
  transition: .25s ease-in-out;
}

nav a:hover {
  color: rgb(220, 120, 0);
}

.nav-bg {
  content: '';
  position: absolute;
  display: block;
  top: -100%;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: rgb(50, 50, 50);
  transition: .45s ease-in-out;
}

.bg-hidden {
  top: -100%;
  opacity: 0;
}

.bg-visible {
  top: 0;
  opacity: 1;
}

h1 {
  text-align: center;
  font-family: Ubuntu;
  letter-spacing: 1px;
}

.hero {
  position: relative;
  width: 100%;
  height: 500px;
  background: rgb(50, 50, 50);
  background: url(//repo.bfw.wiki/bfwrepo/image/5fed12af80191.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_600,/quality,q_90) no-repeat 50% 50% fixed;
  background-size: 130%;
  overflow: hidden;
}

.hero h1 {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: .3em;
  font-size: 3em;
  font-weight: lighter;
}

.content-wrapper {
  width: 80%;
  height: 3000px;
  padding: 1em 10%;
}

.content-wrapper h1 {
  margin: 0;
  color: rgb(220, 120, 0);
}

.content-wrapper p {
  font-family: "Open Sans";
  text-indent: 1.5em;
}
</style>


</head>

<body>
  <nav>
  <div class="nav-bg"></div>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Service</a></li>
    <li><a href="">Help</a></li>
    <li><a href="">Link</a></li>
  </ul>
</nav>
<div class="hero">
  <h1>Something Inspiring</h1>
</div>
<div class="content-wrapper">
  <h1>Some Title</h1>
  <p>Cray marfa artisan mlkshk.........完整代码请登录后点击上方下载按钮下载查看