1.0.5 • Published 7 years ago
peek-a-boo v1.0.5
PEEK A BOO
show elements when they enter the viewport
Links
Usage
yarn add peek-a-boo
Vanilla JS
import Peekaboo from 'peek-a-boo'
const elements = Array.from(document.querySelectorAll('.peekaboo'))
elements.forEach(el => {
const peek = new Peekaboo()
peek.init(el)
})
Custom classNames
This example uses custom classNames (via css-modules import)
import Peekaboo from 'peek-a-boo'
import styles from './main.css'
const elements = Array.from(document.querySelectorAll('.peekaboo'))
elements.forEach(el => {
// configure instance
const peek = new Peekaboo({
classNames: {
isLoading: styles.loading,
hasError: styles.error,
isLoaded: styles.loaded,
isOnscreen: styles.onscreen,
isOffscreen: styles.offscreen,
isAnimating: styles.animating,
isDone: styles.done,
initiallyVisible: styles.visible
}
})
// initialize instance
peek.init(el)
})
Preload nested images
This example preloads nested images
import Peekaboo from 'peek-a-boo'
const elements = Array.from(document.querySelectorAll('.peekaboo'))
elements.forEach(el => {
const peek = new Peekaboo({
preload: true
})
peek.init(el)
})
Add offset
0 This example shows elements when they entered 250px or more from the bottom of the viewport.
import Peekaboo from 'peek-a-boo'
const elements = Array.from(document.querySelectorAll('.peekaboo'))
elements.forEach(el => {
const peek = new Peekaboo({
offset: 250
})
peek.init(el)
})
Preload all images
This example preloads all images by wrapping the call in a preloader.
import Peekaboo from 'peek-a-boo'
import {loadImages} from 'peek-a-boo/helpers'
const images = Array.from(document.querySelectorAll('.peekaboo img')).map(el => el.src)
const elements = Array.from(document.querySelectorAll('.peekaboo'))
loadImages(images).then(() => {
elements.forEach(el => {
const peek = new Peekaboo()
peek.init(el)
})
})
jQuery
This example uses jQuery
import $ from 'jquery'
import 'peek-a-boo/jquery'
$('.peekaboo').Peekaboo()
Methods
Developing
To start a dev server and start developing try the following commands
start
: starts the dev server and builds the required filestest
: runs test and lints filesrun dev
: starts the dev server and watches the required filesrun babel
: generates lib from sourcerun build
: builds all files from sourcerun watch
: builds and watches all files from sourcerun lint
: lints javascript filesrun release
: release new version using "standard-version"