Question

我正在尝试将用户滚动同步我的css转换，因此只要用户滚动页面，css转换就会运行。为了说清楚，我正在尝试做类似于Apple MacBook和Google Drive（标题部分）所做的事情。

我知道，有很多插件可以做到这一点，但我真的想知道它的基础，所以我有更好的理解。

我当前的代码位于Codepen之下或之内。它有效，但我不认为这是最好的方法。谢谢你的帮助。

  $(window).scroll(function() {
    var yScroll = $(this).scrollTop();
    var yFixed = (yScroll / 100);

    $("#logger").append(yScroll + " | ");

    //HTML5 Start
    var opacity1 = Math.round((1 - yFixed) * 100) / 100;
    var topOff1 = 0 - yScroll;
    if (opacity1 <= 0) {
      opacity1 = 0;
      topOff1 = -35;
    }
    $(".html5").css({
      "opacity": opacity1,
      "margin-top": topOff1 + "px"
    });

    //CSS3 Start
    var opacity2 = yFixed;
    var topOff2 = 70 - yFixed;
    if (yScroll < 120) {
      opacity2 = 0;
      topOff2 = 70;
    }
    if (opacity2 >= 1) {
      opacity2 = 1;
      topOff2 = 70 - topOff2;
    }
    $(".css3").css({
      "opacity": opacity2,
      "margin-top": topOff2 + "px"
    });

  });

body {
  background-color: #9932CC;
}
h1 {
  color: #FFFFFF;
  font-weight: bold;
  font-size: 28px;
}
.container {
  margin: 100px auto;
  text-align: center;
  height: 800px;
}
.html5 {
  margin-top: 0;
  opacity: 1;
  transition: margin-top .5s ease, opacity .5s ease;
}
.css3 {
  margin-top: 70px;
  opacity: 0;
  transition: margin-top .7s ease, opacity .7s ease;
}
#logger {
  display: block;
  position: absolute;
  top: 30px;
  left: 150px;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="html5">
    <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" />
    <h1>WELCOME TO HTML5</h1>
  </div>
  <div class="css3">
    <img src="http://s18.postimg.org/5j6iv7r5x/css3_logo_128.png" />
    <h1>LET START USING CSS3</h1>
  </div>
</div>

<!-- <div id="logger"></div> -->

使用用户滚动同步CSS过渡

0 个答案: