ScrollReveal

by Van Hai Le

HTML

<div class="container">
  <div id="result"></div>
</div>
<p class="box">What about getting back for more?</p>
<div class="box1">Why did you leave me?</div>
<!-- <div class="box">
  
</div>
 -->
 <div class="container1"></div>

CSS

.container  {
  width: 100%;
  height: 400px;
  position: relative;
}

.container1 {
    width: 100%;
  height: 700px;
  position: relative;
}

#result {
  position: fixed;
}

.box, .box1 {
  /* height: 100px;
  width: 100%;
  background: pink; */
  position: relative;
  top: -0px;
  opacity: 0;
  transition: all 1s linear;
}

.box1 {
  transition: all 2s ease;
  top: -20px;
}

p {
  margin: 0;
}

JavaScript

let box = document.querySelector('.box');
let box1 = document.querySelector('.box1');

let boxTop = box;

document.getElementById('result').innerHTML = window.pageYOffset + window.innerHeight;
function elementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top >= window.pageYOffset &&
    left >= window.pageXOffset &&
    (top + height) <= (window.pageYOffset + window.innerHeight) &&
    (left + width) <= (window.pageXOffset + window.innerWidth)
  );
}

function scrollReveal(ele) {
	document.addEventListener('scroll', function() {
document.getElementById('result').innerHTML = (window.innerHeight ) + ' ' + ele.offsetTop + ' ' + window.pageYOffset + ' ' + (window.pageYOffset + window.innerHeight);
console.log(window.pageYOffset + window.innerHeight);
let test = window.pageYOffset + window.innerHeight;
	//if (elementInViewport(box)) {
  if (window.pageYOffset < ele.offsetTop && window.pageYOffset >= ele.offsetTop - window.innerHeight) {
	ele.style.opacity = '1';
  ele.style.top = '0';
} else  {
	ele.style.opacity = '0';
  ele.style.top ='-10px';
}
});
}

scrollReveal(box);
scrollReveal(box1);