land

Landing page effects

Install

1npm install --save land

Usage

1var land = require('land');
2
3land('.section')
4  .children('h2')
5    .y(-50)
6    .opacity(0)
7    .scale(0.5)
8  .children('img')
9    .x(50)
10    .scale(0.5)
11    .rotate(10);

API

land(element)

Create section

1land('.section-first');
2land(document.querySelector('.section-first'));

.children(element)

Create section children

1land('.section-first')
2  .children('h2')

.set(prop, val)

Set transform start value

1land('.section-first')
2  .children('h2')
3    .set('scale', 0.5);

or transform function

1land('.section-first')
2  .children('h2')
3    .set('opacity', function(progress) {
4      return 1 - progress;
5    });

.opacity(val)

Set opacity (0..1)

1land('.section-first')
2  .children('h2')
3    .opacity(0.5);

.x(val)

Set horizontal movement

1land('.section-first')
2  .children('h2').x(-250);

.y(val)

Set vertical movement

1land('.section-first')
2  .children('h2').y(-100);

.scale(val)

Set rescaling (0..2)

1land('.section-first')
2  .children('h2')
3    .scale(0.75);

.rotate(val)

Set rotation (0..360)

1land('.section-first')
2  .children('h2')
3    .rotate(45);

.delay(val)

Set transform delay (0..1)

1land('.section-first')
2  .children('h2')
3    .delay(0.25);

land.on(event, fn)

Set events handler

1land.on('change', function(cur) {
2
3});

Support

• Chrome
• Safari
• Firefox
• Opera
• IE 9+

License

MIT