滚动页面时如何使第二个 div 动画

Question

我有两个云图，当页面滚动时，我需要将它们从页面左侧移动到中心。到目前为止，我只能让第一朵云移动。我不明白为什么第二朵云不动。我是编程新手，Javascript - 任何帮助将不胜感激。谢谢你。 JSFiddle link 和下面的代码：

HTML:

   <div class="section"></div>

   <div id="firstMovingCloud" class="cloudInfo">
     <img src="https://i.postimg.cc/2yrPXb1L/cloud.png" class="cloud-image">
   </div>

   <div id="secondMovingCloud" class="cloudInfo">
     <img src="https://i.postimg.cc/2yrPXb1L/cloud.png" class="cloud-image">
   </div>

   <div class="section"></div>

 </div>

CSS:

body {
  background-color: #ADD8E6;
}

.section {
  height: 1000px;
}

.wrapper {
  position: relative;
}

.cloudInfo {
  position: relative;
  text-align: center;
}

.cloud-image {
  width: 240px;
  height: auto;
}

#firstMovingCloud {
  transform: translate(-50%, 0%);/*move the cloud out*/

}

#firstMovingCloud.moving {
  transition: all 2s ease-out; /*bring the cloud in*/
  transform: translate(0%, 0%);
}

#secondMovingCloud {
  transform: translate(-50%, 0%);

}

#secondMovingCloud.movingTwo {
  transition: all 2s ease-out;
  transform: translate(0%, 0%);
}

JAVASCRIPT:

var lastTopFirstCloud;
var lastTopSecondCloud;

window.addEventListener('scroll', function(event) {

  var cloudOne = document.getElementById('firstMovingCloud');
  var cloudTwo = document.getElementById('SecondMovingCloud');

  var firstCloudTop = cloudOne.getBoundingClientRect().top; 
  var secondCloudTop = cloudOne.getBoundingClientRect().top;


    if (cloudOne.className.indexOf('moving') === -1 && firstCloudTop < lastTopFirstCloud) { 
          cloudOne.classList.add('moving');
     }
    lastTopFirstCloud = firstCloudTop;


    if (cloudTwo.className.indexOf('movingTwo') === -1 && secondCloudTop < lastTopSecondCloud) { 
          cloudOne.classList.add('movingTwo');
    }
    lastTopSecondCloud = secondCloudTop;

});

Answer 1

您打错了 ID，就是这样。

在var cloudTwo = document.getElementById('SecondMovingCloud');中，SecondMovingCloud应该是secondMovingCloud。

Javascript、CSS 和 HTML 区分大小写。

不确定 JSFiddle 是否显示 JS 错误，但是当我将所有内容复制到 Codepen 时它显示了错误 Uncaught TypeError: Cannot read property 'className' of null。这意味着 document.getElementById() 返回 null，这导致我拼写错误。只是分享一些关于如何调试的想法。

刚刚注意到您还忘记了更改几个地方的变量名。您可能写过一次并复制了它，但忘记更改变量名。这是更正后的版本。

var lastTopFirstCloud;
var lastTopSecondCloud;

window.addEventListener('scroll', function(event) {

  var cloudOne = document.getElementById('firstMovingCloud');
  var cloudTwo = document.getElementById('secondMovingCloud');

  var firstCloudTop = cloudOne.getBoundingClientRect().top; 
  var secondCloudTop = cloudTwo.getBoundingClientRect().top;


    if (cloudOne.className.indexOf('moving') === -1 && firstCloudTop < lastTopFirstCloud) { 
          cloudOne.classList.add('moving');
     }
    lastTopFirstCloud = firstCloudTop;


    if (cloudTwo.className.indexOf('movingTwo') === -1 && secondCloudTop < lastTopSecondCloud) { 
          cloudTwo.classList.add('movingTwo');
    }
    lastTopSecondCloud = secondCloudTop;

});

此外，您确实应该为此使用数组，而不是将代码写两次。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

滚动页面时如何使第二个 div 动画

How to make second div animate when page is scrolled

javascript

scroll

event-listener