Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

scrollify-lite

0.1.5 • Public • Published

Scrollify lite

Scrollify lite is a simple code for hiding header when scrolling down and showing when scrolling up.

This lets the content to be more focus and shine.

Try scrolling down and then up.

Install

npm install scrollify-lite

Usage

// css

.header-show {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .5s cubic-bezier(.45,1,.22,1);
    transition: all .5s cubic-bezier(.45,1,.22,1);
}

.header-hide {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: all .3s cubic-bezier(.55,.055,.675,.19);
    transition: all .3s cubic-bezier(.55,.055,.675,.19);
}

// js

import scrollify from 'scrollify-lite'

scrollify('.header', '.Post')

Credits

estebanrfp

License

MIT

Install

npm i scrollify-lite

DownloadsWeekly Downloads

12

Version

0.1.5

License

MIT

Last publish

Collaborators

  • avatar