jquery - 在滚动时以 v 形移动两个 div

Question

由于我是 CSS 和 jQuery 的新手，所以我正在尝试学习不同的动画。现在我想做类似于 domain.me 的动画.

我正在使用 jQuery 的 scrolltop() 获取位置，并根据控制台中显示的滚动位置使用 console.log 我手动添加了 if 语句和 添加类()。以下是我的完整代码(同一文件中的样式和脚本)

js fiddle

$(window).scroll(example);

function example() {
  var tempScrollTop = $(window).scrollTop();
  console.log("Scroll from Top: " + tempScrollTop.toString());

  if (tempScrollTop > 20 && tempScrollTop < 50) {
    $("#div1").addClass("slide");
    $("#div2").addClass("slider");
  }
  
  if (tempScrollTop > 50 && tempScrollTop < 100) {
    $("#div1").addClass("slide1");
    $("#div2").addClass("slider1");
  }
  
  if (tempScrollTop > 100 && tempScrollTop < 200) {
    $("#div1").addClass("slide2");
    $("#div2").addClass("slider2");
  }
  
  if (tempScrollTop > 200 && tempScrollTop < 300) {
    $("#div1").addClass("slide2");
  }
};

#mainbord {
  border: 5px solid black;
  height: 100%;
  width: 100%;
  background-image: url("2.jpg");
}

.divv {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  margin-top: 300px;
  margin-left: 500px;
  border-radius: 50%;
}

.div2 {
  border: 1px solid black;
  width: 400px;
  height: 50px;
  margin-left: 400px;
}

.div3 {
  border: 1px solid black;
  width: 500px;
  height: 500px;
  margin-top: 200px;
}

.div4 {
  border: 1px solid black;
  width: 500px;
  height: 500px;
  margin-top: 200px;
}

.slide {
  background-color: green;
  border: 1px solid black;
  width: 180px;
  height: 180px;
  margin-top: 250px;
  margin-left: 420px;
  -moz-transform: scale(0.2);
  transition: all 600ms ease-in;
  */
}

.slide1 {
  background-color: red;
  border: 1px solid black;
  width: px;
  height: 160px;
  margin-top: 160px;
  margin-left: 400px;
  transition: all 600ms ease-in;
}

.slide2 {
  background-color: blue;
  border: 1px solid black;
  width: 100px;
  height: 100px;
  margin-top: 200px;
  margin-left: 350px;
  -moz-transform: scale(0.2);
  transition: all 600ms ease-in;
}

.slider {
  margin-left: 550px;
  margin-top: background-color:green;
  transition: all 600ms ease-in;
  width: 300px;
}

.slider1 {
  margin-left: 700px;
  background-color: red;
  transition: all 600ms ease-in;
  width: 250px;
}

.slider2 {
  margin-left: 730px;
  background-color: blue;
  transition: all 600ms ease-in;
  width: 250px;
}

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

<div id="mainbord">
  <div id="div1" class="divv">
    <img src="1.png" width=100%,height=100%/>
  </div>
  <div id="div2" class="div2"></div>
</div>
<div class="div3"></div>
<div class="div4"></div>

Answer 1

您必须删除/切换 CSS 类。在您的示例中，元素的末尾有每个类(幻灯片、幻灯片 1、幻灯片 2)。