ozBpBA

index.html

<ul id="scene">
  <li class="layer" data-plax="0.00"></li>
  <li class="layer" data-plax="0.20"></li>
  <li class="layer" data-plax="0.40"></li>
  <li class="layer" data-plax="0.60"></li>
  <li class="layer" data-plax="0.80"></li>
  <li class="layer" data-plax="1.00"></li>
</ul>

ozbpba.markdown

ozBpBA

A Pen by Shaw on CodePen.

License.

script.js

console.clear();

/*////////////////////////////////////////*/

// var motion = { x: 0, y: 0, z: 0 };

// window.addEventListener("devicemotion", function(e) {
//   motion.x = e.accelerationIncludingGravity.x;
//   motion.y = e.accelerationIncludingGravity.y;
//   motion.z = e.accelerationIncludingGravity.z;
// }, true);

var mY = document.createElement('h1');
document.body.appendChild(mY);
mY.innerText = 0;

var motionX = 0,
    motionY = 0;
window.addEventListener('deviceorientation', function(event) {
//  motionY = event.beta / 180;//
//  motionY = event.alpha - 180;
  
  var invert = 1; //( event.alpha > 180 ? 1 : -1 );
  
  var y = event.beta; //Math.min( 90, Math.max(-90, event.beta));
  motionY = (y / 90) * invert;
  
  var x =  event.gamma; //Math.min( 90, Math.max(-90, event.gamma));
  motionX = (x / 90) * invert;
  
  mY.innerText = ' X: ' + Math.round(x * 10)/10;
  mY.innerText += ' —— Y: ' + Math.round(y * 10)/10;
  
  var z = event.alpha;
  mY.innerText += ' —— Z: '+ Math.round(z * 10) /10;
  
  mY.innerText += ' –– ' + window.orientation;
});

// window.addEventListener('deviceorientation', function(event) {
//   console.log(event.alpha + ' : ' + event.beta + ' : ' + event.gamma);
// });

/*////////////////////////////////////////*/

var width = window.innerWidth,
  height = window.innerHeight,
  centerX = window.innerWidth / 2, 
  centerY = window.innerHeight / 2;

window.addEventListener('resize',function(){
  width = window.innerWidth;
  height = window.innerHeight;
  centerX = width / 2;
  centerY = height / 2;
});

/*////////////////////////////////////////*/

var pointerX = centerX,
    pointerY = centerY;

function trackPointer(e){
  var event = ( e ? e.touches ? e.touches[0] : e : {} );
  pointerX = event.clientX;
  pointerY = event.clientY;
}

document.addEventListener('mousemove', trackPointer);
document.addEventListener('touchstart', trackPointer);
document.addEventListener('touchmove', trackPointer);

/*////////////////////////////////////////*/

function $$(selector, context){
  if ( !(this instanceof $$) ) { return new $$(selector); }

  if ( selector ) {
    var els = ( typeof selector === 'string' ? (context || document).querySelectorAll(selector) :
               selector instanceof Node || selector === window ? [selector] : selector ),
        length = this.length = els.length,
        i = 0;
    for ( ; i < length; i++ ) { this[i] = els[i]; }
  }

  return this;
}

var fn = $$.prototype = $$.fn = Object.create(Array.prototype);
fn.constructor = $$;

/*////////////////////////////////////////*/

var loop = (function(){

  var animations = [],
      animating = true,
      frame;

  function animate(){
    if ( frame ) { return; }
    if ( animating ) { frame = requestAnimationFrame(animate); }
    var i = animations.length;
    while ( i-- ) {
      if ( !animations[i] || animations[i]() === false ) { animations.splice(i, 1); }
    }
    frame = null;
  };
  animate();

  function add(){ animations.push.apply(animations,arguments); };
  

  return {
    animations: animations,
    add: add, 
    stop: function(){ animating = false; },
    start: function(){ animating = true; animate(); }
  };
}());

function ease(current,target,ease){ return current + (target - current) * ( ease ||2 ); }

/*////////////////////////////////////////*/

function Plax(el){
  
  if ( !(this instanceof Plax) ) { return new Plax(el); }
  
  var els = $$(el || '[data-plax]');
  
  loop.add( this.updatePos.bind(this) );
  
  els.forEach(function(el,i){

    var depth = el.getAttribute('data-plax'),
        range = el.getAttribute('data-plax-range') || this.range;
    
    if ( depth && range ) {
      loop.add( this.updateEl.bind(this,el, depth, range) );
    }

  },this);

  this.els = el;
}

Plax.prototype = {
  
  constructor: Plax,
  
  loop: loop,
  
  offsetX: 0,
  offsetY: 0,
  
  range: 150,
  
  invert: false,
  
  ease: 0.5,//02,
  
  updatePos: function(){
    
    this.offsetX = ease( this.offsetX, 
                        ( motionX || ( pointerX / centerX ) - 1 ) 
                        * ( this.invert ? -1 : 1 ),
                        this.ease);
    
    this.offsetY = ease( this.offsetY, 
                        ( motionY || ( pointerY / centerY ) - 1 ) 
                        * ( this.invert ? -1 : 1 ),
                        this.ease);
  },
  
  updateEl: function(el, depth, range){
    el.style.transform = 'translate3d('+ 
      (this.offsetX) * range * depth + 'px,'+ 
      (this.offsetY) * range * depth + 'px,0)';
  }
};

var plax = Plax();

style.less

html { height: 100%; }
body { min-height: 100%; }
#scene li { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#scene li { 
  
  display: block; 
  width: 30vw; 
  height: 30vw;
  margin: -15vw; 
  outline: solid 3px red;
  
  &:nth-child(1) { opacity: 0.15; }
  &:nth-child(2) { opacity: 0.3; }
  &:nth-child(3) { opacity: 0.5; }
  &:nth-child(4) { opacity: 0.65; }
  &:nth-child(5) { opacity: 0.8; }
}