Alter CSS Classes When An Element Covers Another - jQuery Clipthru

File Size: 96.1 KB
Views Total: 623
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<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">
    // options here

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

<div class="element-1" 
     Another element

<div class="element-1" 
     Another element

<div class="element-1" 
     Another element


4. All plugin's options with default values.

  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.