Question

我有一个单页网站。样本小提琴就在这里。

我想在www.fueled.com上添加效果。第一部分和第一部分没有显示电话，并从第三部分开始显示，并在3-4部分后再次隐藏。一种视差效应。我能帮忙解决这个问题吗？上面给出了我的样本小提琴。

＆＃13;

navlist = [];
$("#navlist a").each(function(i) {
  var thisLink = $(this);
  var thisId = thisLink.attr('href');
  var thisTarget = $(thisId);
  navlist.push({
    'anchor': thisLink,
    'id': thisId,
    'target': thisTarget
  });
  thisLink.on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({
      scrollTop: thisTarget.offset().top
    }, 800);
  });
});
$(window).on('scroll resize', function(e) {
  $.each(navlist, function(e, elem) {
    var placement = elem.target[0].getBoundingClientRect();
    if (placement.top < window.innerHeight && placement.bottom > 0) {
      history.pushState({}, '', elem.id);
      console.log('Hash: ' + elem.id);
      return false; /* Exit $.each loop */
    };
  });

});

＆＃13;

#first {
  height: 100vh;
  background: #F06A59;
}
#second {
  height: 100vh;
  background: #FB3E47;
}
#third {
  height: 100vh;
  background: #FFA306;
}
#fourth {
  height: 100vh;
  background: #528AFC;
}
#fifth {
  height: 100vh;
  background: #52FC6C;
}
#fifth {
  height: 100vh;
  background: #52FC6C;
}
#sixth {
  height: 100vh;
  background: #CFDA25;
}
.header {
  width: 100%;
  position: absolute;
  padding: 20px
}
.nav {
  position: fixed;
  width: 100%;
}
.nav ul {
  list-style: none;
}
.nav ul li {
  display: inline;
  font-size: 18px;
  margin-bottom: 40px;
  font-family: Georgia, "Times New Roman", Times, serif;
}
.nav ul li a {
  text-decoration: none;
  color: #000;
  padding: 10px 5px 10px 70px;
  font-family: agency fb;
  font-weight: bold;
  font-size: 36px;
  text-shadow: 1px 2px 4px #000000;
}
.nav ul li a:hover {
  color: #fff;
  text-shadow: 1px 6px 4px #000000;
  transition: all 0.4s ease-in-out;
}
.nav-active {
  color: red !important;
}
.phone {
  left: 43%;
  top: 28%;
  position: fixed;
  background: url(https://fueled.com/assets/images/home/project-phone--iphone.png) no-repeat;
  background-size: 250px 500px;
  padding: 70px 25px 75px 25px;
  display: block;
}
.phone-inner {
  width: 200px;
  height: 355px;
  border: 1px solid #000;
}

＆＃13;

<div class="header">
  <div class="nav">
    <ul id="navlist">
      <li><a href="#first" id="nav1">Home</a>
      </li>
      <li><a href="#second" id="nav2">Features</a>
      </li>
      <li><a href="#third" id="nav3">About Us</a>
      </li>
    </ul>
  </div>
  <div class="phone" align="center">
    <div class="phone-inner"></div>
  </div>
</div>

<section>
  <div class="main" id="first">
    <video width="100%" autoplay="" loop="" muted>
      <source src="vid/vids.mp4" type="video/mp4">
    </video>
  </div>
</section>
<section>
  <div class="main" id="second"></div>
</section>
<section>
  <div class="main" id="third"></div>
</section>

＆＃13;

Answer 1

我认为ScrollMagic是您想要做的完美工具 http://scrollmagic.io/

一些很好的例子

滚动效果在一个页面的网站上

1 个答案: