This plugin allows running code whenever a target element enters or exit the viewport. This plugin was used to time animations on Agent Image Welcome Kit as the user scrolls the page.
Extensions
* Both Extensions requires style.animate.css
wp_enqueue_style('jquery-elementpeek-style', 'https://cdn.thedesignpeople.net/agentimage-libraries/style.animate.min.css');Installation
- Unzip jquery.elementpeek.min.js to your theme’s js folder.
- Enqueue the following.
wp_enqueue_script('jquery-elementpeek', 'https://cdn.thedesignpeople.net/agentimage-libraries/jquery.elementpeek.min.js');Options
| Option | Default value | Description/Callback signature |
|---|---|---|
| onViewportIn | function(){} |
The function that must be run whenever the element enters the viewport.
function(object){}
|
| onViewportOut | function(){} |
The function that must be run whenever the element exits the viewport.
function(object){}
|
| peekAmountToTrigger | 0.5 | Percentage of the height of the viewport that the target element must occupy before being considered visible. A higher value means longer delay before ‘onViewportIn’ is triggered. |
Sample Usage
jQuery(".my-element").elementPeek({
onViewportIn: function(object) {
/* Show the element when it enters the viewport */
object.show();
},
onViewportOut: function(object) {
/* Hide the element when it exits the viewport */
object.hide();
},
peekAmountToTrigger:0.5 /* Only show the element when its top reaches the middle part of the viewport */
});Basic Implementation
This demo shows a row named/class “group-ep-demo-wrap” that animates it’s child elements (“ep-box-1”, “ep-box-2”, “ep-box-3”) when the parent (group-ep-demo-wrap) is 30% visible in viewport and hides when already past or hidden in viewport.
jQuery(".group-ep-demo-wrap").elementPeek({
onViewportIn: function(object) {
/* Show the element when it enters the viewport */
object.find('.ep-box-1').show();
object.find('.ep-box-2').show();
object.find('.ep-box-3').show();
},
onViewportOut: function(object) {
/* Hide the element when it exits the viewport */
object.find('.ep-box-1').hide();
object.find('.ep-box-2').hide();
object.find('.ep-box-3').hide();
},
peekAmountToTrigger:0.3 /* Only show the element when its top reaches the middle part of the viewport */
});<div class="group-ep-demo-wrap">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">
<div class="ep-box-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum perferendis eum, illum animi commodi voluptatum fuga maiores voluptas, officia quasi eos modi fugit voluptatem omnis voluptatibus. Dignissimos debitis, iste illum.
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="ep-box-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum perferendis eum, illum animi commodi voluptatum fuga maiores voluptas, officia quasi eos modi fugit voluptatem omnis voluptatibus. Dignissimos debitis, iste illum.
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="ep-box-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum perferendis eum, illum animi commodi voluptatum fuga maiores voluptas, officia quasi eos modi fugit voluptatem omnis voluptatibus. Dignissimos debitis, iste illum.
</div>
</div>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum perferendis eum, illum animi commodi voluptatum fuga maiores voluptas, officia quasi eos modi fugit voluptatem omnis voluptatibus. Dignissimos debitis, iste illum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum perferendis eum, illum animi commodi voluptatum fuga maiores voluptas, officia quasi eos modi fugit voluptatem omnis voluptatibus. Dignissimos debitis, iste illum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum perferendis eum, illum animi commodi voluptatum fuga maiores voluptas, officia quasi eos modi fugit voluptatem omnis voluptatibus. Dignissimos debitis, iste illum.