PEEK A BOO
show elements when they enter the viewport
Links
Usage
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 => {
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
}
})
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 files
test
: runs test and lints files
run dev
: starts the dev server and watches the required files
run babel
: generates lib from source
run build
: builds all files from source
run watch
: builds and watches all files from source
run lint
: lints javascript files
run release
: release new version using "standard-version"