Этот скрипт отвечает за такой скролл, класс skrollable
www.awerest.com/demo/superawesome/js/skrollr.js
и по быстрому взглянув видимо эта функция
var _calcSteps = function(fakeFrame, actualFrame) {
//Iterate over all skrollables.
var skrollableIndex = 0;
var skrollablesLength = _skrollables.length;
for(; skrollableIndex < skrollablesLength; skrollableIndex++) {
var skrollable = _skrollables[skrollableIndex];
var element = skrollable.element;
var frame = skrollable.smoothScrolling ? fakeFrame : actualFrame;
var frames = skrollable.keyFrames;
var firstFrame = frames[0].frame;
var lastFrame = frames[frames.length - 1].frame;
var beforeFirst = frame < firstFrame;
var afterLast = frame > lastFrame;
var firstOrLastFrame = frames[beforeFirst ? 0 : frames.length - 1];
var key;
var value;
//If we are before/after the first/last frame, set the styles according to the given edge strategy.
if(beforeFirst || afterLast) {
//Check if we already handled this edge case last time.
//Note: using setScrollTop it's possible that we jumped from one edge to the other.
if(beforeFirst && skrollable.edge === -1 || afterLast && skrollable.edge === 1) {
continue;
}
//Add the skrollr-before or -after class.
_updateClass(element, [beforeFirst ? SKROLLABLE_BEFORE_CLASS : SKROLLABLE_AFTER_CLASS], [SKROLLABLE_BEFORE_CLASS, SKROLLABLE_BETWEEN_CLASS, SKROLLABLE_AFTER_CLASS]);
//Remember that we handled the edge case (before/after the first/last keyframe).
skrollable.edge = beforeFirst ? -1 : 1;
switch(skrollable.edgeStrategy) {
case 'reset':
_reset(element);
continue;
case 'ease':
//Handle this case like it would be exactly at first/last keyframe and just pass it on.
frame = firstOrLastFrame.frame;
break;
default:
case 'set':
var props = firstOrLastFrame.props;
for(key in props) {
if(hasProp.call(props, key)) {
value = _interpolateString(props[key].value);
skrollr.setStyle(element, key, value);
}
}
continue;
}
} else {
//Did we handle an edge last time?
if(skrollable.edge !== 0) {
_updateClass(element, [SKROLLABLE_CLASS, SKROLLABLE_BETWEEN_CLASS], [SKROLLABLE_BEFORE_CLASS, SKROLLABLE_AFTER_CLASS]);
skrollable.edge = 0;
}
}
//Find out between which two key frames we are right now.
var keyFrameIndex = 0;
var framesLength = frames.length - 1;
for(; keyFrameIndex < framesLength; keyFrameIndex++) {
if(frame >= frames[keyFrameIndex].frame && frame <= frames[keyFrameIndex + 1].frame) {
var left = frames[keyFrameIndex];
var right = frames[keyFrameIndex + 1];
for(key in left.props) {
if(hasProp.call(left.props, key)) {
var progress = (frame - left.frame) / (right.frame - left.frame);
//Transform the current progress using the given easing function.
progress = left.props[key].easing(progress);
//Interpolate between the two values
value = _calcInterpolation(left.props[key].value, right.props[key].value, progress);
value = _interpolateString(value);
skrollr.setStyle(element, key, value);
}
}
break;
}
}
}
};
Средний
