Alter Classes Element Covers Another Clipthru - Download Alter CSS Classes When An Element Covers Another - jQuery Clipthru

Download Alter CSS Classes When An Element Covers Another – jQuery Clipthru

By Posted on

This time I will share jQuery Plugin and tutorial about Alter CSS Classes When An Element Covers Another – jQuery Clipthru, hope it will help you in programming stack.

Alter Classes Element Covers Another Clipthru - Download Alter CSS Classes When An Element Covers Another - jQuery Clipthru
File Size: 96.1 KB
Views Total: 528
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

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

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

view source
1 <div class="demo" id="example">
2   Element
3 </div>
view source
1 $(document).ready(function(){
2   $('#example').clipthru({
3     // options here
4   })
5 })

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

view source
01 <div class="element-1"
02      data-jq-clipthru="class-1">
03      Another element
04 </div>
05  
06 <div class="element-1"
07      data-jq-clipthru="class-2">
08      Another element
09 </div>
10  
11 <div class="element-1"
12      data-jq-clipthru="class-3">
13      Another element
14 </div>
15  
16 ...

4. All plugin’s options with default values.

view source
01 $('#example').clipthru({
02   method: ['clip', 'clip-path'],
03   dataAttribute: 'jq-clipthru',
04   simpleMode: false,
05   collisionTarget: null, // jQuery selector
06   cloneOnCollision: false,
07   keepClonesInHTML: false,
08   removeAttrOnClone: ['id'],
09   blockSource: null, // uses jQuery selector instead of jq-clipthru attribute
10   up<a href="https://www.jqueryscript.net/time-clock/">date</a>On<a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>: true,
11   updateOnResize: true,
12   updateOn<a href="https://www.jqueryscript.net/zoom/">Zoom</a>: true,
13   updateOnCSSTransitionEnd: false,
14   autoUpdate: false,
15   autoUpdateInterval: 100,
16   broadcastEvents: true,
17   debug: false
18 })

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

source : jquery.net

Related posts: