Как отключить эффект фона JS / CSS при прокрутке? - PullRequest
Новая
       12

Как отключить эффект фона JS / CSS при прокрутке?

0 голосов
/ 27 сентября 2018

Мне нравятся классные фоновые эффекты JS / CSS, но на многих более медленных устройствах они занимают много ресурсов процессора и действительно перегружают браузер.Действительно хорошим примером является этот сайт: http://volar.makwan.net/index02.html

Код в HTML для этого эффекта - <div id="fss" class="fss full-screen "></div> - есть ли способ отключить этот DIV, когда пользователь отходит от #home, чтобы ресурсы не появлялись?t посвящен фоновому эффекту, когда он не виден?

1 Ответ

0 голосов
/ 27 сентября 2018

Вы можете удалить класс (или идентификатор) div, который вызывает утечку ресурсов, когда div покидает область просмотра (то есть экран).Вы даже можете добавить временный класс, пока он находится вне экрана, если хотите.

Посмотрите на фрагмент кода ниже.Хотя вы этого не видите, зеленое поле теряет класс green, когда оно исчезает с экрана, и вместо него добавляется класс orange.Затем, когда он возвращается на экран, div получает класс green и теряет класс orange: 

function isElementInViewport(el) {
    let rect = el.getBoundingClientRect();
    return rect.bottom > 0 && rect.right > 0 && rect.left < (window.innerWidth || document.documentElement.clientWidth) && rect.top < (window.innerHeight || document.documentElement.clientHeight);
}

let isVisible = true;

window.onscroll = function() {
  let myGreenBox = document.getElementById('green-box');
  if(!isElementInViewport(myGreenBox) && isVisible) {
    myGreenBox.classList.add("orange");
    myGreenBox.classList.remove("green");
    
    console.log("Green Box style removed");
    isVisible = false;
  } else if(isElementInViewport(myGreenBox) && !isVisible){
    myGreenBox.classList.add("green");
    myGreenBox.classList.remove("orange");
    console.log("Green Box style added");
    isVisible = true;
  }
  
};
.box {
  height: 100px;
  width: 100px;
}

.green {
  background-color: lime;
}

.orange {
  background-color: orange;
}

.container {
  height: 200vh;
}
<div class="container">
  <div id="green-box" class="box green">

  </div>
</div>

Вы можете применить эту идею к <div id="fss" class="fss full-screen "></div>, чтобы отключить ее, когда она не на экране.

...