PEEK A BOO

show elements when they enter the viewport

• Links
• Usage
  • Vanilla JS
  • Custom classNames
  • Preload nested images
  • Add offset
  • Preload all images
  • jQuery
• Developing

Links

• Documentation
• Vanilla JS Demo
• jQuery Demo

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 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"