scrolling animation

by 19

design > coding

sliiice.com afternoon@sliiice.com twitter: sliiiceHQ

libraries

skrollr
http://prinzhorn.github.io/skrollr

SUPERSCROLLORAMA
http://johnpolacek.github.io/superscrollorama

Jarallax
http://www.jarallax.com/demo

why don't I use library?

1. need to learn

2. crazy to maintain

3. hard to customize

solution

DIY!

1. make the storyboard

setting.js

- speed

- data of keyframes, animate elements and styles

2. hire a director

animator.js

- generate an array "animators" via setting
- loop animate

setting.js

speedRate = 0.1;
// keyFrames
f = {};
f.start          = 1,
f.scrollDown     = 5;
f.logotype       = f.scrollDown + 300;
f.limit          = f.logotype + 100;
// element and style
settings = [
  {
    selector: '#inner-wrapper',
    frame: [ f.start, f.internet, f.media, f.team ],
    style: {
      left: [450,     '-200',     '+200',  -800],
      top:  [  0,      -1280,     -1700, ' +60']
    }
  },
  {
    selector: '#link-service',
    frame: [ f.digital, f.team ]
  },
]

animator.js

init:
  animators = [];  animators.push({
    root   : $(data.selector),
    style  : data.style,
    frame  : frame
  });

animloop:  requestAnimFrame( animloop );  render();
render:  // check is_unactive || is_active by keyframe  // set classname on element( unactive, active, actived)  // set classname on body( xxx-unactive, xxx-active, xxx-actived)   // mapping frame to targetStyle  // apply (targetStyle - currentStyle) * step

thank you :)

afternoon@sliiice.com