Не работает scroll блока

297
11 декабря 2017, 14:26

	let scene = document.getElementById('scene'); 
	let parallaxInstance = new Parallax(scene); 
	$('li.layer .text .sub-title').typed({ 
		strings: ["Fullstack Developer and Graphic Artist ^1500 ", "We're currently working on our full site ^1500"], 
		loop: true, 
		contentType: 'html', 
		showCursor: false 
	}); 
 
;(function(window, document, undefined) { 
 
  var NAME = 'Parallax'; 
  var MAGIC_NUMBER = 30; 
  var DEFAULTS = { 
    calibrationThreshold: 100, 
    calibrationDelay: 500, 
    supportDelay: 500, 
    calibrateX: false, 
    calibrateY: true, 
    invertX: true, 
    invertY: true, 
    limitX: false, 
    limitY: false, 
    scalarX: 10.0, 
    scalarY: 10.0, 
    frictionX: 0.1, 
    frictionY: 0.1 
  }; 
 
  function Parallax(element, options) { 
 
    this.element = element; 
    this.layers = element.getElementsByClassName('layer'); 
 
    var data = { 
      calibrateX: this.data(this.element, 'calibrate-x'), 
      calibrateY: this.data(this.element, 'calibrate-y'), 
      invertX: this.data(this.element, 'invert-x'), 
      invertY: this.data(this.element, 'invert-y'), 
      limitX: this.data(this.element, 'limit-x'), 
      limitY: this.data(this.element, 'limit-y'), 
      scalarX: this.data(this.element, 'scalar-x'), 
      scalarY: this.data(this.element, 'scalar-y'), 
      frictionX: this.data(this.element, 'friction-x'), 
      frictionY: this.data(this.element, 'friction-y') 
    }; 
 
    for (var key in data) { 
      if (data[key] === null) delete data[key]; 
    } 
 
    this.extend(this, DEFAULTS, options, data); 
 
    this.calibrationTimer = null; 
    this.calibrationFlag = true; 
    this.enabled = false; 
    this.depths = []; 
    this.raf = null; 
 
    this.ox = 0; 
    this.oy = 0; 
    this.ow = 0; 
    this.oh = 0; 
 
    this.cx = 0; 
    this.cy = 0; 
 
    this.ix = 0; 
    this.iy = 0; 
 
    this.mx = 0; 
    this.my = 0; 
 
    this.vx = 0; 
    this.vy = 0; 
 
    this.onMouseMove = this.onMouseMove.bind(this); 
    this.onDeviceOrientation = this.onDeviceOrientation.bind(this); 
    this.onOrientationTimer = this.onOrientationTimer.bind(this); 
    this.onCalibrationTimer = this.onCalibrationTimer.bind(this); 
    this.onAnimationFrame = this.onAnimationFrame.bind(this); 
    this.onWindowResize = this.onWindowResize.bind(this); 
 
    this.initialise(); 
  } 
 
  Parallax.prototype.extend = function() { 
    if (arguments.length > 1) { 
      var master = arguments[0]; 
      for (var i = 1, l = arguments.length; i < l; i++) { 
        var object = arguments[i]; 
        for (var key in object) { 
          master[key] = object[key]; 
        } 
      } 
    } 
  }; 
 
  Parallax.prototype.data = function(element, name) { 
    return this.deserialize(element.getAttribute('data-'+name)); 
  }; 
 
  Parallax.prototype.deserialize = function(value) { 
    if (value === "true") { 
      return true; 
    } else if (value === "false") { 
      return false; 
    } else if (value === "null") { 
      return null; 
    } else if (!isNaN(parseFloat(value)) && isFinite(value)) { 
      return parseFloat(value); 
    } else { 
      return value; 
    } 
  }; 
 
  Parallax.prototype.offset = function(element) { 
    var x = 0, y = 0; 
    while (element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) { 
      x += element.offsetLeft - element.scrollLeft; 
      y += element.offsetTop - element.scrollTop; 
      element = element.offsetParent; 
    } 
    return {top:y, left:x}; 
  }; 
 
  Parallax.prototype.camelCase = function(value) { 
    return value.replace(/-+(.)?/g, function(match, character){ 
      return character ? character.toUpperCase() : ''; 
    }); 
  }; 
 
  Parallax.prototype.transformSupport = function(value) { 
    var element = document.createElement('div'); 
    var propertySupport = false; 
    var propertyValue = null; 
    var featureSupport = false; 
    var cssProperty = null; 
    var jsProperty = null; 
    for (var i = 0, l = this.vendors.length; i < l; i++) { 
      if (this.vendors[i] !== null) { 
        cssProperty = this.vendors[i][0] + 'transform'; 
        jsProperty = this.vendors[i][1] + 'Transform'; 
      } else { 
        cssProperty = 'transform'; 
        jsProperty = 'transform'; 
      } 
      if (element.style[jsProperty] !== undefined) { 
        propertySupport = true; 
        break; 
      } 
    } 
    switch(value) { 
      case '2D': 
        featureSupport = propertySupport; 
        break; 
      case '3D': 
        if (propertySupport) { 
          document.body.appendChild(element); 
          element.style[jsProperty] = 'translate3d(1px,1px,1px)'; 
          propertyValue = window.getComputedStyle(element).getPropertyValue(cssProperty); 
          featureSupport = propertyValue !== undefined && propertyValue.length > 0 && propertyValue !== "none"; 
          document.body.removeChild(element); 
        } 
        break; 
    } 
    return featureSupport; 
  }; 
 
  Parallax.prototype.ww = null; 
  Parallax.prototype.wh = null; 
  Parallax.prototype.hw = null; 
  Parallax.prototype.hh = null; 
  Parallax.prototype.portrait = null; 
  Parallax.prototype.desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|IEMobile)/); 
  Parallax.prototype.vendors = [null,['-webkit-','webkit'],['-moz-','Moz'],['-o-','O'],['-ms-','ms']]; 
  Parallax.prototype.motionSupport = window.DeviceMotionEvent !== undefined; 
  Parallax.prototype.orientationSupport = window.DeviceOrientationEvent !== undefined; 
  Parallax.prototype.orientationStatus = 0; 
  Parallax.prototype.transform2DSupport = Parallax.prototype.transformSupport('2D'); 
  Parallax.prototype.transform3DSupport = Parallax.prototype.transformSupport('3D'); 
 
  Parallax.prototype.initialise = function() { 
 
    if (this.transform3DSupport) this.accelerate(this.element); 
    var style = window.getComputedStyle(this.element); 
    if (style.getPropertyValue('position') === 'static') { 
      this.element.style.position = 'relative'; 
    } 
 
    for (var i = 0, l = this.layers.length; i < l; i++) { 
      var layer = this.layers[i]; 
      if (this.transform3DSupport) this.accelerate(layer); 
      layer.style.position = i ? 'absolute' : 'relative'; 
      layer.style.display = 'block'; 
      layer.style.height = '100%'; 
      layer.style.width = '100%'; 
      layer.style.left = 0; 
      layer.style.top = 0; 
 
      this.depths.push(this.data(layer, 'depth') || 0); 
    } 
 
    this.updateDimensions(); 
    this.enable(); 
    this.queueCalibration(this.calibrationDelay); 
  }; 
 
  Parallax.prototype.updateDimensions = function() { 
 
    this.ox = this.offset(this.element).left; 
    this.oy = this.offset(this.element).top; 
    this.ow = this.element.offsetWidth; 
    this.oh = this.element.offsetHeight; 
 
    this.ww = window.innerWidth; 
    this.wh = window.innerHeight; 
    this.hw = this.ww / 2; 
    this.hh = this.wh / 2; 
  }; 
 
  Parallax.prototype.queueCalibration = function(delay) { 
    clearTimeout(this.calibrationTimer); 
    this.calibrationTimer = setTimeout(this.onCalibrationTimer, delay); 
  }; 
 
  Parallax.prototype.enable = function() { 
    if (!this.enabled) { 
      this.enabled = true; 
      if (this.orientationSupport) { 
        this.portrait = null; 
        window.addEventListener('deviceorientation', this.onDeviceOrientation); 
        setTimeout(this.onOrientationTimer, this.supportDelay); 
      } else { 
        this.cx = 0; 
        this.cy = 0; 
        this.portrait = false; 
        window.addEventListener('mousemove', this.onMouseMove); 
      } 
      window.addEventListener('resize', this.onWindowResize); 
      this.raf = requestAnimationFrame(this.onAnimationFrame); 
    } 
  }; 
 
  Parallax.prototype.disable = function() { 
    if (this.enabled) { 
      this.enabled = false; 
      if (this.orientationSupport) { 
        window.removeEventListener('deviceorientation', this.onDeviceOrientation); 
      } else { 
        window.removeEventListener('mousemove', this.onMouseMove); 
      } 
      window.removeEventListener('resize', this.onWindowResize); 
      cancelAnimationFrame(this.raf); 
    } 
  }; 
 
  Parallax.prototype.calibrate = function(x, y) { 
    this.calibrateX = x === undefined ? this.calibrateX : x; 
    this.calibrateY = y === undefined ? this.calibrateY : y; 
  }; 
 
  Parallax.prototype.invert = function(x, y) { 
    this.invertX = x === undefined ? this.invertX : x; 
    this.invertY = y === undefined ? this.invertY : y; 
  }; 
 
  Parallax.prototype.friction = function(x, y) { 
    this.frictionX = x === undefined ? this.frictionX : x; 
    this.frictionY = y === undefined ? this.frictionY : y; 
  }; 
 
  Parallax.prototype.scalar = function(x, y) { 
    this.scalarX = x === undefined ? this.scalarX : x; 
    this.scalarY = y === undefined ? this.scalarY : y; 
  }; 
 
  Parallax.prototype.limit = function(x, y) { 
    this.limitX = x === undefined ? this.limitX : x; 
    this.limitY = y === undefined ? this.limitY : y; 
  }; 
 
  Parallax.prototype.clamp = function(value, min, max) { 
    value = Math.max(value, min); 
    value = Math.min(value, max); 
    return value; 
  }; 
 
  Parallax.prototype.css = function(element, property, value) { 
    var jsProperty = null; 
    for (var i = 0, l = this.vendors.length; i < l; i++) { 
      if (this.vendors[i] !== null) { 
        jsProperty = this.camelCase(this.vendors[i][1] + '-' + property); 
      } else { 
        jsProperty = property; 
      } 
      if (element.style[jsProperty] !== undefined) { 
        element.style[jsProperty] = value; 
        break; 
      } 
    } 
  }; 
 
  Parallax.prototype.accelerate = function(element) { 
    this.css(element, 'transform', 'translate3d(0,0,0)'); 
    this.css(element, 'transform-style', 'preserve-3d'); 
    this.css(element, 'backface-visibility', 'hidden'); 
  }; 
 
  Parallax.prototype.setPosition = function(element, x, y) { 
    x += '%'; 
    y += '%'; 
    if (this.transform3DSupport) { 
      this.css(element, 'transform', 'translate3d('+x+','+y+',0)'); 
    } else if (this.transform2DSupport) { 
      this.css(element, 'transform', 'translate('+x+','+y+')'); 
    } else { 
      element.style.left = x; 
      element.style.top = y; 
    } 
  }; 
 
  Parallax.prototype.onOrientationTimer = function(event) { 
    if (this.orientationSupport && this.orientationStatus === 0) { 
      this.disable(); 
      this.orientationSupport = false; 
      this.enable(); 
    } 
  }; 
 
  Parallax.prototype.onCalibrationTimer = function(event) { 
    this.calibrationFlag = true; 
  }; 
 
  Parallax.prototype.onWindowResize = function(event) { 
    this.updateDimensions(); 
  }; 
 
  Parallax.prototype.onAnimationFrame = function() { 
    var dx = this.ix - this.cx; 
    var dy = this.iy - this.cy; 
    if ((Math.abs(dx) > this.calibrationThreshold) || (Math.abs(dy) > this.calibrationThreshold)) { 
      this.queueCalibration(0); 
    } 
    if (this.portrait) { 
      this.mx = (this.calibrateX ? dy : this.iy) * this.scalarX; 
      this.my = (this.calibrateY ? dx : this.ix) * this.scalarY; 
    } else { 
      this.mx = (this.calibrateX ? dx : this.ix) * this.scalarX; 
      this.my = (this.calibrateY ? dy : this.iy) * this.scalarY; 
    } 
    if (!isNaN(parseFloat(this.limitX))) { 
      this.mx = this.clamp(this.mx, -this.limitX, this.limitX); 
    } 
    if (!isNaN(parseFloat(this.limitY))) { 
      this.my = this.clamp(this.my, -this.limitY, this.limitY); 
    } 
    this.vx += (this.mx - this.vx) * this.frictionX; 
    this.vy += (this.my - this.vy) * this.frictionY; 
    for (var i = 0, l = this.layers.length; i < l; i++) { 
      var layer = this.layers[i]; 
      var depth = this.depths[i]; 
      var xOffset = this.vx * depth * (this.invertX ? -1 : 1); 
      var yOffset = this.vy * depth * (this.invertY ? -1 : 1); 
      this.setPosition(layer, xOffset, yOffset); 
    } 
    this.raf = requestAnimationFrame(this.onAnimationFrame); 
  }; 
 
  Parallax.prototype.onDeviceOrientation = function(event) { 
 
    if (!this.desktop && event.beta !== null && event.gamma !== null) { 
 
      this.orientationStatus = 1; 
 
      var x = (event.beta  || 0) / MAGIC_NUMBER; //  -90 :: 90 
      var y = (event.gamma || 0) / MAGIC_NUMBER; // -180 :: 180 
 
      var portrait = this.wh > this.ww; 
      if (this.portrait !== portrait) { 
        this.portrait = portrait; 
        this.calibrationFlag = true; 
      } 
 
 
      if (this.calibrationFlag) { 
        this.calibrationFlag = false; 
        this.cx = x; 
        this.cy = y; 
      } 
 
      this.ix = x; 
      this.iy = y; 
    } 
  }; 
 
  Parallax.prototype.onMouseMove = function(event) { 
 
    this.ix = (event.pageX - this.hw) / this.hw; 
    this.iy = (event.pageY - this.hh) / this.hh; 
  }; 
 
  window[NAME] = Parallax; 
 
})(window, document); 
 
;(function() { 
 
  var lastTime = 0; 
  var vendors = ['ms', 'moz', 'webkit', 'o']; 
 
  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { 
    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; 
    window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; 
  } 
 
  if (!window.requestAnimationFrame) { 
    window.requestAnimationFrame = function(callback, element) { 
      var currTime = new Date().getTime(); 
      var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 
      var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
        timeToCall); 
      lastTime = currTime + timeToCall; 
      return id; 
    }; 
  } 
 
  if (!window.cancelAnimationFrame) { 
    window.cancelAnimationFrame = function(id) { 
      clearTimeout(id); 
    }; 
  } 
 
}());
body { 
  line-height: 1.4em; 
  color: white; 
} 
#welcome { 
  width: 40%; 
  background-color: rgba(31, 34, 33, 1); 
  padding: 40px; 
  margin-left: auto; 
  margin-right: auto; 
  overflow: scroll; 
  height: 100%; 
} 
#center { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  z-index: 1; 
  height: 100%; 
} 
#scene, .layer { 
  display: block; 
  height: 100vh; 
  width: 100vw; 
  padding: 0; 
  margin: 0; 
} 
#scene { 
  position: relative; 
  overflow: hidden; 
} 
#scene li.layer .background { 
  background: url(http://cita.com.ua/img/ntours/big/4/1049071809.jpg) no-repeat 50% 25%; 
  position: absolute; 
  background-size: cover; 
  width: 110%; 
  bottom: -20px; 
  left: -5%; 
  top: -5%; 
}
<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="UTF-8"> 
  <link rel="shortcut icon" href="images/favicon.png" type="image/x-icon"> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
 
      <link rel="stylesheet" href="css/style.css"> 
 
</head> 
<body> 
<ul id="scene"> 
  <div id="center"> 
  <div id="welcome"> 
    <p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p> 
  </div> 
  </div> 
  <li class="layer" data-depth="0.10"> 
    <div class="background"> 
	</div> 
  </li> 
</ul> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js'></script> 
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/typed.min.js'></script> 
 
    <script  src="js/index.js"></script> 
 
</body> 
</html>

Скроллинг блока не работает. Фон должен оставаться на месте, как сейчас. Или же скроллинг всей страницы, например как на imdb.com тоже со статичным фоном.

Answer 1

Как один из вариантов:

let scene = document.getElementById('scene'); 
	let parallaxInstance = new Parallax(scene); 
	$('li.layer .text .sub-title').typed({ 
		strings: ["Fullstack Developer and Graphic Artist ^1500 ", "We're currently working on our full site ^1500"], 
		loop: true, 
		contentType: 'html', 
		showCursor: false 
	}); 
 
;(function(window, document, undefined) { 
 
  var NAME = 'Parallax'; 
  var MAGIC_NUMBER = 30; 
  var DEFAULTS = { 
    calibrationThreshold: 100, 
    calibrationDelay: 500, 
    supportDelay: 500, 
    calibrateX: false, 
    calibrateY: true, 
    invertX: true, 
    invertY: true, 
    limitX: false, 
    limitY: false, 
    scalarX: 10.0, 
    scalarY: 10.0, 
    frictionX: 0.1, 
    frictionY: 0.1 
  }; 
 
  function Parallax(element, options) { 
 
    this.element = element; 
    this.layers = element.getElementsByClassName('layer'); 
 
    var data = { 
      calibrateX: this.data(this.element, 'calibrate-x'), 
      calibrateY: this.data(this.element, 'calibrate-y'), 
      invertX: this.data(this.element, 'invert-x'), 
      invertY: this.data(this.element, 'invert-y'), 
      limitX: this.data(this.element, 'limit-x'), 
      limitY: this.data(this.element, 'limit-y'), 
      scalarX: this.data(this.element, 'scalar-x'), 
      scalarY: this.data(this.element, 'scalar-y'), 
      frictionX: this.data(this.element, 'friction-x'), 
      frictionY: this.data(this.element, 'friction-y') 
    }; 
 
    for (var key in data) { 
      if (data[key] === null) delete data[key]; 
    } 
 
    this.extend(this, DEFAULTS, options, data); 
 
    this.calibrationTimer = null; 
    this.calibrationFlag = true; 
    this.enabled = false; 
    this.depths = []; 
    this.raf = null; 
 
    this.ox = 0; 
    this.oy = 0; 
    this.ow = 0; 
    this.oh = 0; 
 
    this.cx = 0; 
    this.cy = 0; 
 
    this.ix = 0; 
    this.iy = 0; 
 
    this.mx = 0; 
    this.my = 0; 
 
    this.vx = 0; 
    this.vy = 0; 
 
    this.onMouseMove = this.onMouseMove.bind(this); 
    this.onDeviceOrientation = this.onDeviceOrientation.bind(this); 
    this.onOrientationTimer = this.onOrientationTimer.bind(this); 
    this.onCalibrationTimer = this.onCalibrationTimer.bind(this); 
    this.onAnimationFrame = this.onAnimationFrame.bind(this); 
    this.onWindowResize = this.onWindowResize.bind(this); 
 
    this.initialise(); 
  } 
 
  Parallax.prototype.extend = function() { 
    if (arguments.length > 1) { 
      var master = arguments[0]; 
      for (var i = 1, l = arguments.length; i < l; i++) { 
        var object = arguments[i]; 
        for (var key in object) { 
          master[key] = object[key]; 
        } 
      } 
    } 
  }; 
 
  Parallax.prototype.data = function(element, name) { 
    return this.deserialize(element.getAttribute('data-'+name)); 
  }; 
 
  Parallax.prototype.deserialize = function(value) { 
    if (value === "true") { 
      return true; 
    } else if (value === "false") { 
      return false; 
    } else if (value === "null") { 
      return null; 
    } else if (!isNaN(parseFloat(value)) && isFinite(value)) { 
      return parseFloat(value); 
    } else { 
      return value; 
    } 
  }; 
 
  Parallax.prototype.offset = function(element) { 
    var x = 0, y = 0; 
    while (element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) { 
      x += element.offsetLeft - element.scrollLeft; 
      y += element.offsetTop - element.scrollTop; 
      element = element.offsetParent; 
    } 
    return {top:y, left:x}; 
  }; 
 
  Parallax.prototype.camelCase = function(value) { 
    return value.replace(/-+(.)?/g, function(match, character){ 
      return character ? character.toUpperCase() : ''; 
    }); 
  }; 
 
  Parallax.prototype.transformSupport = function(value) { 
    var element = document.createElement('div'); 
    var propertySupport = false; 
    var propertyValue = null; 
    var featureSupport = false; 
    var cssProperty = null; 
    var jsProperty = null; 
    for (var i = 0, l = this.vendors.length; i < l; i++) { 
      if (this.vendors[i] !== null) { 
        cssProperty = this.vendors[i][0] + 'transform'; 
        jsProperty = this.vendors[i][1] + 'Transform'; 
      } else { 
        cssProperty = 'transform'; 
        jsProperty = 'transform'; 
      } 
      if (element.style[jsProperty] !== undefined) { 
        propertySupport = true; 
        break; 
      } 
    } 
    switch(value) { 
      case '2D': 
        featureSupport = propertySupport; 
        break; 
      case '3D': 
        if (propertySupport) { 
          document.body.appendChild(element); 
          element.style[jsProperty] = 'translate3d(1px,1px,1px)'; 
          propertyValue = window.getComputedStyle(element).getPropertyValue(cssProperty); 
          featureSupport = propertyValue !== undefined && propertyValue.length > 0 && propertyValue !== "none"; 
          document.body.removeChild(element); 
        } 
        break; 
    } 
    return featureSupport; 
  }; 
 
  Parallax.prototype.ww = null; 
  Parallax.prototype.wh = null; 
  Parallax.prototype.hw = null; 
  Parallax.prototype.hh = null; 
  Parallax.prototype.portrait = null; 
  Parallax.prototype.desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|IEMobile)/); 
  Parallax.prototype.vendors = [null,['-webkit-','webkit'],['-moz-','Moz'],['-o-','O'],['-ms-','ms']]; 
  Parallax.prototype.motionSupport = window.DeviceMotionEvent !== undefined; 
  Parallax.prototype.orientationSupport = window.DeviceOrientationEvent !== undefined; 
  Parallax.prototype.orientationStatus = 0; 
  Parallax.prototype.transform2DSupport = Parallax.prototype.transformSupport('2D'); 
  Parallax.prototype.transform3DSupport = Parallax.prototype.transformSupport('3D'); 
 
  Parallax.prototype.initialise = function() { 
 
    if (this.transform3DSupport) this.accelerate(this.element); 
    var style = window.getComputedStyle(this.element); 
    if (style.getPropertyValue('position') === 'static') { 
      this.element.style.position = 'relative'; 
    } 
 
    for (var i = 0, l = this.layers.length; i < l; i++) { 
      var layer = this.layers[i]; 
      if (this.transform3DSupport) this.accelerate(layer); 
      layer.style.position = i ? 'absolute' : 'relative'; 
      layer.style.display = 'block'; 
      layer.style.height = '100%'; 
      layer.style.width = '100%'; 
      layer.style.left = 0; 
      layer.style.top = 0; 
 
      this.depths.push(this.data(layer, 'depth') || 0); 
    } 
 
    this.updateDimensions(); 
    this.enable(); 
    this.queueCalibration(this.calibrationDelay); 
  }; 
 
  Parallax.prototype.updateDimensions = function() { 
 
    this.ox = this.offset(this.element).left; 
    this.oy = this.offset(this.element).top; 
    this.ow = this.element.offsetWidth; 
    this.oh = this.element.offsetHeight; 
 
    this.ww = window.innerWidth; 
    this.wh = window.innerHeight; 
    this.hw = this.ww / 2; 
    this.hh = this.wh / 2; 
  }; 
 
  Parallax.prototype.queueCalibration = function(delay) { 
    clearTimeout(this.calibrationTimer); 
    this.calibrationTimer = setTimeout(this.onCalibrationTimer, delay); 
  }; 
 
  Parallax.prototype.enable = function() { 
    if (!this.enabled) { 
      this.enabled = true; 
      if (this.orientationSupport) { 
        this.portrait = null; 
        window.addEventListener('deviceorientation', this.onDeviceOrientation); 
        setTimeout(this.onOrientationTimer, this.supportDelay); 
      } else { 
        this.cx = 0; 
        this.cy = 0; 
        this.portrait = false; 
        window.addEventListener('mousemove', this.onMouseMove); 
      } 
      window.addEventListener('resize', this.onWindowResize); 
      this.raf = requestAnimationFrame(this.onAnimationFrame); 
    } 
  }; 
 
  Parallax.prototype.disable = function() { 
    if (this.enabled) { 
      this.enabled = false; 
      if (this.orientationSupport) { 
        window.removeEventListener('deviceorientation', this.onDeviceOrientation); 
      } else { 
        window.removeEventListener('mousemove', this.onMouseMove); 
      } 
      window.removeEventListener('resize', this.onWindowResize); 
      cancelAnimationFrame(this.raf); 
    } 
  }; 
 
  Parallax.prototype.calibrate = function(x, y) { 
    this.calibrateX = x === undefined ? this.calibrateX : x; 
    this.calibrateY = y === undefined ? this.calibrateY : y; 
  }; 
 
  Parallax.prototype.invert = function(x, y) { 
    this.invertX = x === undefined ? this.invertX : x; 
    this.invertY = y === undefined ? this.invertY : y; 
  }; 
 
  Parallax.prototype.friction = function(x, y) { 
    this.frictionX = x === undefined ? this.frictionX : x; 
    this.frictionY = y === undefined ? this.frictionY : y; 
  }; 
 
  Parallax.prototype.scalar = function(x, y) { 
    this.scalarX = x === undefined ? this.scalarX : x; 
    this.scalarY = y === undefined ? this.scalarY : y; 
  }; 
 
  Parallax.prototype.limit = function(x, y) { 
    this.limitX = x === undefined ? this.limitX : x; 
    this.limitY = y === undefined ? this.limitY : y; 
  }; 
 
  Parallax.prototype.clamp = function(value, min, max) { 
    value = Math.max(value, min); 
    value = Math.min(value, max); 
    return value; 
  }; 
 
  Parallax.prototype.css = function(element, property, value) { 
    var jsProperty = null; 
    for (var i = 0, l = this.vendors.length; i < l; i++) { 
      if (this.vendors[i] !== null) { 
        jsProperty = this.camelCase(this.vendors[i][1] + '-' + property); 
      } else { 
        jsProperty = property; 
      } 
      if (element.style[jsProperty] !== undefined) { 
        element.style[jsProperty] = value; 
        break; 
      } 
    } 
  }; 
 
  Parallax.prototype.accelerate = function(element) { 
    this.css(element, 'transform', 'translate3d(0,0,0)'); 
    this.css(element, 'transform-style', 'preserve-3d'); 
    this.css(element, 'backface-visibility', 'hidden'); 
  }; 
 
  Parallax.prototype.setPosition = function(element, x, y) { 
    x += '%'; 
    y += '%'; 
    if (this.transform3DSupport) { 
      this.css(element, 'transform', 'translate3d('+x+','+y+',0)'); 
    } else if (this.transform2DSupport) { 
      this.css(element, 'transform', 'translate('+x+','+y+')'); 
    } else { 
      element.style.left = x; 
      element.style.top = y; 
    } 
  }; 
 
  Parallax.prototype.onOrientationTimer = function(event) { 
    if (this.orientationSupport && this.orientationStatus === 0) { 
      this.disable(); 
      this.orientationSupport = false; 
      this.enable(); 
    } 
  }; 
 
  Parallax.prototype.onCalibrationTimer = function(event) { 
    this.calibrationFlag = true; 
  }; 
 
  Parallax.prototype.onWindowResize = function(event) { 
    this.updateDimensions(); 
  }; 
 
  Parallax.prototype.onAnimationFrame = function() { 
    var dx = this.ix - this.cx; 
    var dy = this.iy - this.cy; 
    if ((Math.abs(dx) > this.calibrationThreshold) || (Math.abs(dy) > this.calibrationThreshold)) { 
      this.queueCalibration(0); 
    } 
    if (this.portrait) { 
      this.mx = (this.calibrateX ? dy : this.iy) * this.scalarX; 
      this.my = (this.calibrateY ? dx : this.ix) * this.scalarY; 
    } else { 
      this.mx = (this.calibrateX ? dx : this.ix) * this.scalarX; 
      this.my = (this.calibrateY ? dy : this.iy) * this.scalarY; 
    } 
    if (!isNaN(parseFloat(this.limitX))) { 
      this.mx = this.clamp(this.mx, -this.limitX, this.limitX); 
    } 
    if (!isNaN(parseFloat(this.limitY))) { 
      this.my = this.clamp(this.my, -this.limitY, this.limitY); 
    } 
    this.vx += (this.mx - this.vx) * this.frictionX; 
    this.vy += (this.my - this.vy) * this.frictionY; 
    for (var i = 0, l = this.layers.length; i < l; i++) { 
      var layer = this.layers[i]; 
      var depth = this.depths[i]; 
      var xOffset = this.vx * depth * (this.invertX ? -1 : 1); 
      var yOffset = this.vy * depth * (this.invertY ? -1 : 1); 
      this.setPosition(layer, xOffset, yOffset); 
    } 
    this.raf = requestAnimationFrame(this.onAnimationFrame); 
  }; 
 
  Parallax.prototype.onDeviceOrientation = function(event) { 
 
    if (!this.desktop && event.beta !== null && event.gamma !== null) { 
 
      this.orientationStatus = 1; 
 
      var x = (event.beta  || 0) / MAGIC_NUMBER; //  -90 :: 90 
      var y = (event.gamma || 0) / MAGIC_NUMBER; // -180 :: 180 
 
      var portrait = this.wh > this.ww; 
      if (this.portrait !== portrait) { 
        this.portrait = portrait; 
        this.calibrationFlag = true; 
      } 
 
 
      if (this.calibrationFlag) { 
        this.calibrationFlag = false; 
        this.cx = x; 
        this.cy = y; 
      } 
 
      this.ix = x; 
      this.iy = y; 
    } 
  }; 
 
  Parallax.prototype.onMouseMove = function(event) { 
 
    this.ix = (event.pageX - this.hw) / this.hw; 
    this.iy = (event.pageY - this.hh) / this.hh; 
  }; 
 
  window[NAME] = Parallax; 
 
})(window, document); 
 
;(function() { 
 
  var lastTime = 0; 
  var vendors = ['ms', 'moz', 'webkit', 'o']; 
 
  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { 
    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; 
    window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; 
  } 
 
  if (!window.requestAnimationFrame) { 
    window.requestAnimationFrame = function(callback, element) { 
      var currTime = new Date().getTime(); 
      var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 
      var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
        timeToCall); 
      lastTime = currTime + timeToCall; 
      return id; 
    }; 
  } 
 
  if (!window.cancelAnimationFrame) { 
    window.cancelAnimationFrame = function(id) { 
      clearTimeout(id); 
    }; 
  } 
 
}());
body { 
  line-height: 1.4em; 
  color: white; 
} 
#welcome { 
    width: 40%; 
    background-color: rgba(31, 34, 33, 1); 
    padding: 40px; 
    margin-left: auto; 
    margin-right: auto; 
    overflow: scroll; 
    position: fixed; 
    z-index: 9; 
    height: 100%; 
    top: 5%; 
    max-height: 523px; 
} 
#center { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  z-index: 1; 
  height: 100%; 
} 
#scene, .layer { 
  display: block; 
  height: 100vh; 
  width: 100vw; 
  padding: 0; 
  margin: 0; 
} 
#scene { 
  position: relative; 
  overflow: hidden; 
} 
#scene li.layer .background { 
  background: url(http://cita.com.ua/img/ntours/big/4/1049071809.jpg) no-repeat 50% 25%; 
  position: absolute; 
  background-size: cover; 
  width: 110%; 
  bottom: -20px; 
  left: -5%; 
  top: -5%; 
}
<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="UTF-8"> 
  <link rel="shortcut icon" href="images/favicon.png" type="image/x-icon"> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
 
      <link rel="stylesheet" href="css/style.css"> 
 
</head> 
<body> 
    <div id="center"> 
  <div id="welcome"> 
    <p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p> 
  </div> 
  </div> 
<ul id="scene"> 
 
  <li class="layer" data-depth="0.10"> 
    <div class="background"> 
	</div> 
  </li> 
   
 
</ul> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js'></script> 
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/typed.min.js'></script> 
 
    <script  src="js/index.js"></script> 
 
</body> 
</html>

READ ALSO
какая функция и что делает тег span в html

какая функция и что делает тег span в html

какая функция и что делает тег span в html

287
Почему не меняется картинка профиля?

Почему не меняется картинка профиля?

На сайте присутствует профиль пользователя, на котором есть картинка, ее можно изменить путем загрузки фото с компьютераПосле выбора фото...

337
Заменить select на кнопки

Заменить select на кнопки

Как поменять селект-форму на кнопки как на скрине ?

235