CHANGE ELEMENTS COLOR OVER DARK SECTIONS

by davidxmartins

HTML

<body class="body">
    <header class="magic-header"> 
      <!-- replace content -->
      <div class="js-replace">
        <!-- item to replace -->
        <div class="js-replace__item  js-replace__item--active">
          <div class="js-replace__content">
            <div class="magic-icons">
              <div class="object-left slide"></div>
              <div class="object-right slide"></div>
            </div>
          </div>
        </div>  
        <!-- end item to replace -->
       
        <!-- item to replace with -->
        <div class="js-replace__item">
          <div class="js-replace__content">
            <div class="magic-icons  magic-icons--invert">
            <div class="object-left-b"></div>
              <div class="object-right-b"></div>
            </div>
          </div>
        </div>
        <!-- end item to replace with -->
      </div>
      <!-- end replace content -->
    </header>
  
  

      <section class="section section--x">
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      </section>
      <section class="section  section--bg1 replace">
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      </section>
      <section class="section section--x"><br><br><br><br><br><br></section>
      <section class="section  section--bg2 replace">
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      </section>
      <section class="section section--x">
        <br><br><br><br><br><br><br><br>
      </section>
      <section class="section  section--bg3 replace">
       ...

CSS

/* variables */
:root {
  /* this value is going to be changed by javascript */
  --replace-offset: 50%;
  --replace-offset-2: calc((100% - var(--replace-offset)) * -1);
}

/* without fixed header this makes no sense */
.magic-header {
  position: fixed;
  width: 100%;
  height: 120px;
  overflow: hidden;
}

.magic-icons {
  display: inline-block;
}

.object-left {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: green;
  margin: 15px 0 0 15px;
}
.object-left-b {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: white;
  margin: 15px 0 0 15px;
}
.object-right {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: green;
  position: absolute;
  right: 15px;
  top: 15px;
}
.object-right-b {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: white;
  position: absolute;
  right: 15px;
  top: 15px;
}

.object-left, .object-left-b {
  opacity: 0;
  transition: opacity 2s, transform 2s ease-in-out;
  transform: translateX(0px);
}

.object-right, .object-right-b {
  opacity: 0;
  transition: opacity 2s, transform 2s ease-in-out;
  transform: translateX(0px);
}


.magic-icons--invert {
  background-color: transparent;
}




.section--bg1 {
  background-color: green;
  height: auto;
}

.section--bg2 {
  background-color: red;
  height: auto;
}

.section--bg3 {
  background-color: blue;
  height: auto;
}
.section--x {
  background-color: white;
  height: auto;
}
/**
    This is the interesting part
  **/

/* align content above each other without absolute */
.js-replace {
  display: grid;
}

.js-replace__item {
  grid-row: -1 / 1;
  grid-column: -1 / 1;
  overflow: hidden;
  will-change: transform;
}

/* item to replace with */
.js-replace__item {
  transform: translateY(calc(var(--replace-offset) * 1));
}

.js-replace__content {
  /* fixes problem with calculating correct height in js */
  border: 1px solid transparent;
  will-change: transform;

  transform:...

JavaScript

// ===========================================================
// This is for the entrence and exit of the logo and menu icon
// ===========================================================

var objectLeft = document.querySelector('.object-left');
var objectRight = document.querySelector('.object-right');
var objectLeftB = document.querySelector('.object-left-b');
var objectRightB = document.querySelector('.object-right-b');
var previousScroll = 0;

// Function to handle the 'transitionend' event
function endTransition(e) {
  if (e.propertyName === 'transform') {
    this.style.transform = '';
  }
}

// Add 'transitionend' listeners
[objectLeft, objectRight, objectLeftB, objectRightB].forEach(ele => {
  ele.addEventListener('transitionend', endTransition);
});

window.addEventListener("scroll", function(){
  var vh = window.innerHeight * 0.01;  //1% of viewport height
  var currentScroll = window.pageYOffset;
  if(currentScroll > 100 * vh && previousScroll <= currentScroll) { // moment of entrance
    objectLeft.style.opacity = '1';
    objectRight.style.opacity = '1';
    objectLeftB.style.opacity = '1';
    objectRightB.style.opacity = '1';
  }

  if(previousScroll >  currentScroll && currentScroll <= 100 * vh) { // moment of exit
    objectLeft.style.opacity = '0';
    objectRight.style.opacity = '0';
    objectLeftB.style.opacity = '0';
    objectRightB.style.opacity = '0';

    // Slide out animation
    objectLeft.style.transform = 'translateX(-150px)';
    objectRight.style.transform = 'translateX(150px)';
    objectLeftB.style.transform = 'translateX(-150px)';
    objectRightB.style.transform = 'translateX(150px)';
  }

  previousScroll = currentScroll;
});



// ==================================
// This is standalone script for the color change (previous part is optional). 
// Applay the class .replace to the section where you want the fixed element to change color (meaning, being replaced)
// ==================================

// Detect request...