creativelive / Appear
Licence: mit
execute callbacks when dom elements appear in and out of view
Stars: ✭ 172
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Appear
Floatthead
Fixed <thead>. Doesn't need any custom css/html. Does what position:sticky can't
Stars: ✭ 1,193 (+593.6%)
Mutual labels: scrolling
Multiscroll.js
multiscroll plugin by Alvaro Trigo. Create scrolling split websites. http://alvarotrigo.com/multiScroll/
Stars: ✭ 1,537 (+793.6%)
Mutual labels: scrolling
Parallaxscrollingview
Parallax scrolling either by offset or automatically.
Stars: ✭ 91 (-47.09%)
Mutual labels: scrolling
Prognroll
A tiny, lightweight jQuery plugin that creates scroll progress bar on the page.
Stars: ✭ 108 (-37.21%)
Mutual labels: scrolling
Phaser Kinetic Scrolling Plugin
Kinetic Scrolling plugin for Canvas using Phaser Framework
Stars: ✭ 117 (-31.98%)
Mutual labels: scrolling
Scrollissimo
Javascript plugin for smooth scroll-controlled animations
Stars: ✭ 160 (-6.98%)
Mutual labels: scrolling
Jquery Scrolllock
Locks mouse wheel scroll inside container, preventing it from propagating to parent element
Stars: ✭ 109 (-36.63%)
Mutual labels: scrolling
Angular Fullpage
Official Angular wrapper for fullPage.js https://alvarotrigo.com/angular-fullpage/
Stars: ✭ 131 (-23.84%)
Mutual labels: scrolling
React Router Scroll Memory
React component to keep the scroll of the page and to restore it if the user clicks on the back button of its browser
Stars: ✭ 95 (-44.77%)
Mutual labels: scrolling
Pd Select
vue components ,like ios 3D picker style,vue 3d 选择器组件,3D滚轮
Stars: ✭ 101 (-41.28%)
Mutual labels: scrolling
Vue Fullpage.js
Official Vue.js wrapper for fullPage.js http://alvarotrigo.com/vue-fullpage/
Stars: ✭ 1,626 (+845.35%)
Mutual labels: scrolling
Django Infinite Scroll Pagination
🌀 Pagination based on the seek method / keyset paging / offset-less pagination
Stars: ✭ 90 (-47.67%)
Mutual labels: scrolling
Fixed Sticky
DEPRECATED: A position: sticky polyfill that works with filamentgroup/fixed-fixed for a safer position:fixed fallback.
Stars: ✭ 1,490 (+766.28%)
Mutual labels: scrolling
Sticky Sidebar
😎 Pure JavaScript tool for making smart and high performance sticky sidebar.
Stars: ✭ 2,057 (+1095.93%)
Mutual labels: scrolling
React Intersection Observer
React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.
Stars: ✭ 2,689 (+1463.37%)
Mutual labels: scrolling
React Virtual
⚛️ Hooks for virtualizing scrollable elements in React
Stars: ✭ 2,369 (+1277.33%)
Mutual labels: scrolling
appear
Track the visibility of dom elements and fire user defined callbacks as they appear and disappear.
Demos
- appear.js simple test page
- appearlazy - a full fledged lazy image loader that uses appear.js
Be sure to view the documentation on the project page
Usage
Include appear.js in your page, it has no dependencies.
Call appear()
passing in an object with the following:
-
init
function to run when dom is interactive, but before appear.js has started tracking. -
elements
required function that returns an htmlcollection of elements to track. The dom will be interactive at this point. Can alternatively be an existing htmlcollection instead of a function. -
appear
function to run when an element is in view, passed the element that has come into view. If defined then appear.js will track elements until they come into view. -
disappear
function to run when an element goes out of view, passed the element that has gone out of view. If defined then appear.js will track elements until they go out of view. -
reappear
if true appear.js will keep tracking elements for successive appears and dissappears. Default is false. -
bounds
increase, in pixels, to the threshold size of the element so it can be "viewable" before it is actually in the viewport. -
debounce
appear.js tracks elements on browser scroll and resize, for performance reasons this check is "debounced" to only happen once for multiple events, 50ms after the last event ends. You can override this value here. -
deltaSpeed
in addition to debouncing, appear.js will also check for items during continuous slow scrolling, you can controll how slow the scrolling should be via this value. Default is 50 (pixels). -
deltaTimeout
after a succesful delta speed check, appear.js will not check for viewable items again until this timeout passes. Default is 500 (ms). -
done
function called when appear.js is no longer tracking any items and event listeners have been removed.
Example
appear({
init: function init(){
console.log('dom is ready');
},
elements: function elements(){
// work with all elements with the class "track"
return document.getElementsByClassName('track');
},
appear: function appear(el){
console.log('visible', el);
},
disappear: function disappear(el){
console.log('no longer visible', el);
},
bounds: 200,
reappear: true
});
api
appear()
will return an object with the following:
-
trigger()
force a check for viewable elements. -
pause()
temporarily stop tracking elements. -
resume()
resume tracking elements. -
destroy()
permanently stop tracking elements.
Download
appear.js logo designed by Magicon from the Noun Project :: Creative Commons - Attribution (CC BY 3.0)
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].