logo test

by davidxmartins

HTML

<body class="body">

  <div class="icon1"> 
    <!-- 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="logo">Logo</div>
        </div>
      </div>  
      <!-- end item to replace -->
     
      <!-- item to replace with -->
      <div class="js-replace__item">
        <div class="js-replace__content">
          <div class="logo invert">Logo</div>
        </div>
      </div>
      <!-- end item to replace with -->
    </div>
    <!-- end replace content -->
  </div>






  <div class="icon2"> 
    <!-- 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="menu">Menu</div>
        </div>
      </div>  
      <!-- end item to replace -->
     
      <!-- item to replace with -->
      <div class="js-replace__item">
        <div class="js-replace__content">
          <div class="menu invert">Menu</div>
        </div>
      </div>
      <!-- end item to replace with -->
    </div>
    <!-- end replace content -->
  </div>
  
  
  
  
  
  
  <main class="main">
  
    <section class="section section--bg1">
      <h1 class="section__title">

      </h1>
    </section>
    
    <section class="section  section--bg2">
      <h1 class="section__title">

      </h1>      
    </section>
    
    <section class="section section--bg3">
      <h1 class="section__title">

      </h1>
    </section>
    
    <section class="section  section--bg4">
      <h1 class="section__title">

      </h1>      
    </section>
    
    <section class="section section--bg2">
      <h1 class="section__title">

      </h1>
    </section> 
  </main>

</body>

CSS

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

/* Sticky Footer */
.body {
  margin: 0;
  min-height: 100vh;
}

/* without position fixed header this makes no sense */
.icon1 {
  position: fixed;
  left: 30px;
  top: 30px;
}

.icon2 {
  position: fixed;
  right: 30px;
  top: 30px;
}

.logo {
  display: inline-block;
  border: 3px solid #007b64;
  color: #007b64;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 2em;
  font-family: sans-serif;
}

.menu {
  display: inline-block;
  border: 3px solid #007b64;
  color: #007b64;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 2em;
  font-family: sans-serif;
}

.invert {
  color: white;
  border-color: white;
}

.section {
  padding-top: var(--gutter);
  padding-bottom: var(--gutter);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.section--bg1 {
  background-color: #007b64;
}

.section--bg2 {
  background-color: #E2F0E9;
}

.section--bg3 {
  background-color: white;
}

.section--bg4 {
  background-color: black;
}

/**
  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: translateY(calc(var(--replace-offset) * -1));
}

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

.js-replace__item--active .js-replace__content {
  transform: translateY(calc(var(--replace-offset-2) * -1));
}


/* REVERSE ANIMATION...

JavaScript

// Detect request animation frame
const scroll = window.requestAnimationFrame
  || window.webkitRequestAnimationFrame
  || window.mozRequestAnimationFrame
  || window.msRequestAnimationFrame
  || window.oRequestAnimationFrame
  // IE Fallback, you can even fallback to onscroll
  || function (callback) { window.setTimeout(callback, 1000 / 60); };
let lastPosition = -1;

// my Variables
let lastSection = false;
let replaceItemTop = -1;
let replaceItemBottom = -1;
let replaceItemHeight = -1;

// The Scroll Function
function loop() {
  const top = window.pageYOffset;
  // my variables

  // my sections to calculate stuff
  const sections = document.querySelectorAll('.section');
  const replaceContainer = document.querySelectorAll('.js-replace');
  const replaceItem = document.querySelectorAll('.js-replace__item');

  if (replaceItem.length > 0) {
    // get top position of item from container, because image might not have loaded
    replaceItemTop = parseInt(replaceContainer[0].getBoundingClientRect().top);
    replaceItemHeight = replaceItem[0].offsetHeight;
    replaceItemBottom = replaceItemTop + replaceItemHeight;
  }

  let sectionTop = -1;
  let sectionBottom = -1;
  let currentSection = -1;

  // Fire when needed
  if (lastPosition == window.pageYOffset) {
    scroll(loop);
    return false;
  }
  lastPosition = window.pageYOffset;

  // Your Function
  Array.prototype.forEach.call(sections, (el, i) => {
    sectionTop = parseInt(el.getBoundingClientRect().top);
    sectionBottom = parseInt(el.getBoundingClientRect().bottom);

    // active section
    if ((sectionTop <= replaceItemBottom) && (sectionBottom > replaceItemTop)) {
      // check if current section has bg
      currentSection = el.classList.contains('section--bg1') || el.classList.contains('section--bg4');

      // switch class depending on background image
      if (currentSection) {
        replaceContainer[0].classList.remove('js-replace--reverse');
      } else {
       ...