Ответы пользователя по тегу HTML
  • Как сделать похожий Parallax?

    @masq
    Этот скрипт отвечает за такой скролл, класс 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;
    				}
    			}
    		}
    	};
    Ответ написан
    Комментировать