Suggested read: Intersection Observer API
Have you ever found yourself in the need of knowing how much of an element is visible to, let's say, animate some of it styles depending on the percentage? Well, there you go!
- IE 9+
- jQuery & Zepto Compatible
- 'Selector' can be a string, node, an array of nodes, a NodeList or a jQuery object.
- The events callback and the 'getState' methods return an array list of the VisibilityState Object.
var selector = ".element";
// Creates a new visc
var visc = new Visc();
// Binds the scroll and resize events with a callback
// attached to the elements queried by the selector.
visc.bind(selector, function(states) {});
// Unbind all visc events related to the selector
visc.unbind();
// Gets the visibility state of a selector without
// binding scroll and resize events.
var states = Visc.getState(selector);
var selector = ".element";
// Binds the scroll and resize events with a callback.
$(selector).visc(function(states){});
// Unbind all visc events related to the selector
$(selector).unvisc();
// Gets the visibility state of a selector without
// binding scroll and resize events.
var states = $(selector).visc('getState');
VisibilityState
{
// How much of the element is visible?
visibilityRate: {
both: Percentage,
horizontal: Percentage,
vertical: Percentage
},
// How much space does the element occupies in the viewport?
occupiedViewport: {
both: Percentage,
horizontal: Percentage,
vertical: Percentage
},
// How much of the element you can see in your viewport?
maxVisibility = {
both: Percentage,
horizontal: Percentage,
vertical: Percentage
},
// Frames relative to the element
frames =
{
window: Rectangle Frame,
element: Rectangle Frame,
viewport: Rectangle Frame
},
// If the element is position on the screen (independent of its width and height)
onScreen: boolean,
// Current Element
element: Node
}
// Gets the visibility state of a selector without
// binding scroll and resize events.
Visc.getState(selector);
// Gets the number of event binded visc instances
Visc.numberOfInstances;
// Checks if a node or collection of nodes is visible on the viewport
// minValue: how much of each node must be visible to return true (0 to 1)
Visc.isVisible(selector[,min,[booleanMode]]);
// Checks if a node or a collection of nodes is positioned on the screen
// (independent of its width and height)
Visc.isOnScreen = function (selector[,booleanMode])
In case of a collection parameter, the default behaviour of 'isOnScreen' and 'isVisible' is to check if all the nodes are visible/on screen. To change it to return true if at least one of the nodes is visible/on screen you can set the parameter BooleanMode to Visc.BooleanMode.OR.
Visc.BooleanMode { OR, AND }
var selector = ".block";
var allVisible = Visc.isVisible(selector);
if(allVisible)
console.log("I can see everything!!!!!");
else
console.log("Where did everyone go???");
var selector = ".block";
var oneVisibile = Visc.isVisible(selector, 0, Visc.BooleanMode.OR);
if(oneVisibile)
console.log("Hey, I can see you!! Where are your other friends??");
else
console.log("Where did everyone go???");
var selector = ".block.tiny";
new Visc().bind(selector, function(states)
{
states.forEach(function(state, i)
{
if(state.onScreen)
console.log("Hey, you are very thin, but I can still see you!");
});
});
var selector = ".block.tiny";
window.addEventListener("scroll", function()
{
var onScreen = Visc.isOnScreen(selector, Visc.BooleanMode.OR);
if(onScreen)
console.log("Hey, you are very thin, but I can still see you!");
});
var selector = ".block.tiny";
window.addEventListener("scroll", function()
{
var onScreen = Visc.isOnScreen(selector, 0);
if(onScreen)
console.log("Hey, you and your friends are very thin, but I can still see you!");
});