mithril-parallax

1.0.1 • Public • Published

mithril-parallax

Move target inside a zone on window scroll.

Usage

var Styles = {
  heading: {
    position: 'relative',
  },
 
  target: {
    bottom: 0,
    left: 0,
    position: 'absolute',
    right: 0,
    width: '100%',
  },
 
  zone: {
    height: '50vh',
    overflow: 'hidden',
    position: 'relative',
  },
};
 
function target(elem) {
  return elem.children[0];
}
 
function power(pCtrl) {
  return pCtrl.windowHeight * 2;
}
 
m(window.MithrilParallax.Zone, { offset: 0, power: power, style: Styles.zone, target: target }, [
  m('img', { src: 'https://placehold.it/640x480', style: Styles.target }),
  m('h1', { style: Styles.heading }, 'Lorem ipsum dolor sit amet'),
});

See index.html and index.js for another example.

Notes

  • power can be negative, try it with top: 0 instead of bottom: 0 in Styles.target

  • offset defaults to 0

  • style is optional, you can write CSS for .mpx-zone instead

  • target defaults to first child

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i mithril-parallax

Weekly Downloads

1

Version

1.0.1

License

MIT

Last publish

Collaborators

  • makepost