在滚动上移动v形状的两个div

Question

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

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

js fiddle

＆＃13;

＆＃13;

$(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");
  }
};

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您必须删除/切换CSS类。在您的示例中，元素最后包含每个Class（s​​lide，slide1，slide2）。

Answer 2

假设您熟悉chrome dev控制台，

选择.me图标<div id ="slikadiv"..（查看截屏），然后在网页部分中慢慢滚动，查看CSS属性width，top，left的变化情况同样的。

在.scroll jquery函数中编写自己的函数以移动图标。

同时检查其他CSS属性。