#prlx-container
  .text-top
    p Scroll down to see the parallax effect
  .row
    .prlx-item
      .prlx-item-inner.left.speed-3
    .prlx-item
      .prlx-item-inner.top.speed-2.spin
    .prlx-item
      .prlx-item-inner.right
    .prlx-item
      .prlx-item-inner.left.speed-5
    .prlx-item
      .prlx-item-inner.zoom.speed-2
    .prlx-item
      .prlx-item-inner.right.speed-5
    .prlx-item
      .prlx-item-inner.left
    .prlx-item
      .prlx-item-inner.bottom
    .prlx-item
      .prlx-item-inner.right.spin
  .side-dots
    

html, body{
  height:3000px;
  margin:0;
}

// Dots background 
// Inspired by https://codepen.io/edmundojr/pen/xOYJGw

// Colors
$bg-color: hsl(256,33,10);
$dot-color: hsl(256,33,70);

// Dimensions
$dot-size: 1px;
$dot-space: 22px;

body {
  background:
    linear-gradient(90deg, $bg-color ($dot-space - $dot-size), transparent 1%) center,
    linear-gradient($bg-color ($dot-space - $dot-size), transparent 1%) center,
    $dot-color;
  background-size: $dot-space $dot-space;
}
#prlx-container{
  // background:#E1F5FE;
  // height:100%;
  .text-top{
    text-align:center;
    padding:10px 20px;
    p{
      color:#fff;
      font-weight:bold
    }
  }
  .row{
    position:fixed;
    top:35%;
    left:0;
    right:0;
    margin: 0 auto;
    width:340px;
    height:340px;
    .prlx-item{
      display:inline-block;
      margin:0;
      position:relative;
      width:100px;
      height:100px;
      .prlx-item-inner{
        position:absolute;
        background:#81D4FA;
        width:100px;
        height:100px;
      }
    }
  }
}  

(function () { // Avoid conflict with other libraries

//Checks which kind of movements buond to an element
const checkMovement = (item)=>{
  let classesList = item.className.split(' ');
  let result = {speed:1, direction:null, type:null,item:item};
  
  for(let className of classesList){
    // Define animation action
    switch(className){
           case 'spin':
            result.type = className;
           break;
           case 'zoom':
            result.type = className;
           break;
           case 'top':
            result.direction = 'bottom';
           break;
           case 'bottom':
            result.direction = 'top';
           break;
           case 'left':
            result.direction = 'right';
           break;
           case 'right':
            result.direction = 'left';
           break;
           case 'prlx-item-inner':
            
           break;
           default:
            result.speed = getSpeed(className);
           break;
           }
  }
  
  return result;
};

//Zooms out element
const zoom = (item, speed,scroll )=>{
  let transformation = ( ( 100 / (scroll/10) ) * (1/speed));

  if(transformation <= 1) item.style.transform = `scale(${transformation})`;
  else item.style.transform = `scale(1)`;
};

//Spins element
const spin = (item, speed,scroll )=>{
  let rotation = ( scroll / 30 ) * speed;
  item.style.transform = `rotate(${rotation}deg)`;
};

//Moves element to a specific side
const move = (item,direction, speed,scroll)=>{
  let movementSize = (scroll/50) * speed ;
  item.style[direction] = movementSize +'px';
};

//Bind all movements to element
const bindMovementsToElement = (item, speed, direction, type, scroll)=>{
  if(type && type === 'zoom') zoom(item,speed,scroll);
  if(type && type === 'spin') spin(item,speed,scroll);
  if(direction) move(item, direction, speed, scroll);
};

//returns speed of an element
const getSpeed = (className)=>{
  let speed = 1;
  let name = ''+className;

  let re = /speed/i;
  let myArray = name.match(re);

  if(myArray && myArray.length>0){
    let speedNum = name.split('-');
    speed = + speedNum[1];
  }

  return speed;
};

// Bind animations to elements
  
window.addEventListener('scroll', ()=> {
  let doc = document.getElementById('prlx-container');
  let top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);

  let items = document.querySelectorAll('.prlx-item-inner');
  //items[0].style.background = 'red';
  for(const item of items){
    let {speed, direction, type} = checkMovement(item);
    
    bindMovementsToElement(item, speed, direction, type, top);
  }
});

})();