Alter CSS Classes When An Element Covers Another - jQuery Clipthru

Clipthru is a fancy jQuery element collision detection plugin that can be used to alter CSS classes when an element is scrolled and covers another using CSS clip and clip-path attributes.

A typical use of this plugin is to diffing the Text and Background/Image colors on scroll.

How to use it:

1. Download and insert the minified version of the jQuery Clipthru plugin after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="dist/jq-clipthru.min.js"></script>

2. Call the function on the targer element and we're ready to go.

<div class="demo" id="example">
  Element
</div>

$(document).ready(function(){
  $('#example').clipthru({
    // options here
  })
})

3. Specify the CSS class to alert in the data-jq-clipthru attribute.

<div class="element-1" 
     data-jq-clipthru="class-1">
     Another element
</div>

<div class="element-1" 
     data-jq-clipthru="class-2">
     Another element
</div>

<div class="element-1" 
     data-jq-clipthru="class-3">
     Another element
</div>

...

4. All plugin's options with default values.

$('#example').clipthru({
  method: ['clip', 'clip-path'],
  dataAttribute: 'jq-clipthru',
  simpleMode: false,
  collisionTarget: null, // jQuery selector
  cloneOnCollision: false,
  keepClonesInHTML: false,
  removeAttrOnClone: ['id'],
  blockSource: null, // uses jQuery selector instead of jq-clipthru attribute
  updateOnScroll: true,
  updateOnResize: true,
  updateOnZoom: true,
  updateOnCSSTransitionEnd: false,
  autoUpdate: false,
  autoUpdateInterval: 100,
  broadcastEvents: true,
  debug: false
})

---

This awesome jQuery plugin is developed by salsita. For more Advanced Usages, please check the demo page or visit the official website.