Как оживить второй div при прокрутке страницы - PullRequest
Новая
       19

Как оживить второй div при прокрутке страницы

0 голосов
/ 18 марта 2020

У меня есть два облачных изображения, оба из которых мне нужно переместить с левой стороны страницы в центр при прокрутке страницы. Пока что я могу заставить двигаться только первое облако. Я не могу понять, почему второе облако не будет двигаться. Я новичок в программировании и Javascript - любая помощь будет оценена. Спасибо. Ссылка JSFiddle и код ниже:

https://jsfiddle.net/b1ts5gLc/16/

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;

});

1 Ответ

0 голосов
/ 18 марта 2020

Вы опечатали ID, вот и все.

В var cloudTwo = document.getElementById('SecondMovingCloud');, SecondMovingCloud должно быть secondMovingCloud.

Javascript, CSS и HTML с учетом регистра.

Не уверен, что JSFiddle показывает JS ошибки, но когда я скопировал все в Codepen, он показал мне ошибку Uncaught TypeError: Cannot read property 'className' of null. Это означает, что document.getElementById() вернул ноль, что привело меня к вашей орфографической ошибке. Просто поделюсь некоторыми мыслями о том, как отлаживать.

Просто заметил, что вы также забыли изменить имена переменных в нескольких местах. Возможно, вы написали это один раз и скопировали, но забыли изменить имена переменных. Вот исправленная версия. 

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

...