inViewport

A light weight, simple, pure javascript plugin used to determine whether an element is in the viewport.

Using inViewport

The following are two examples of how to apply inviewport to an element. Feel free to hop on over to the inViewport github page for more information.

        
  /**
   * Toggle example.
   * Once 175 pixels is visible horizontally and vertically, 
   * the first callback is fired. The second callback is fired when less
   * than 175 pixels is visible horizontally or vertically.
   */
  const selectorA = document.getElementById('selector-a');
  inViewport(selectorA, '175px', '175px',
    [
      () => { 
        selectorA.classList.add('visible'); 
        console.log('The element is now visible!');
      },
      () => { 
        selectorA.classList.remove('visible'); 
        console.log('The element is now hidden.')
      },
    ]
  );

  /**
   * Static example.
   * Once 50% is visible horizontally and vertically, the 
   * callback is fired.
   */
  const selectorB = document.getElementById('selector-b');
  inViewport(selectorB, 0.5, 0.5, () => { 
    selectorB.classList.add('visible'); 
    console.log('The element is now visible!');
  });
        
      

Scroll down to test.

Toggle Example

Scroll right to test.

Static example