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 тоже со статичным фоном.
Как один из вариантов:
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>
Виртуальный выделенный сервер (VDS) становится отличным выбором
На сайте присутствует профиль пользователя, на котором есть картинка, ее можно изменить путем загрузки фото с компьютераПосле выбора фото...