cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <body>
  <div class="quantity-container">
    <p class="controls-header">Card quantity</p>
    <div class="controls">
      <button class="control-button" onclick="decreaseQuantity();">-</button>
      <div id="quantity-level" class="indicator"></div>
      <button class="control-button" onclick="increaseQuantity();">+</button>
    </div>
  </div>
  <div class="blur-container">
    <p class="controls-header">DOF Control</p>
    <div class="controls">
      <button class="control-button" onclick="decreaseDepth();">-</button>
      <div id="blur-level" class="indicator"></div>
      <button class="control-button" onclick="increaseDepth();">+</button>
    </div>
  </div>
  <div id="dof-container" class="container">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/ace.png" class="card-common" />
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/two.png" class="card-common" />
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/three.png" class="card-common" />
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/four.png" class="card-common" />
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/five.png" class="card-common" />
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/six.png" class="card-common" />
  </div>
</body>
            
          
!
            
              body {
  background: hsl(213, 8%, 40%);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: row;
  transition: all .5s ease;
  perspective: 200px;
  height: 100vh;
}

.card-common {
  align-self: center;
  cursor: pointer;
  box-shadow: -10px 0 30px -10px hsla(0, 0%, 0%, 0.45);
  transition: all .15s linear;
  transform: rotateY(5deg);
}

/* clicked elements in dof-container dodge left to fully reveal themselves */
.reveal:active {
  padding-right: 6em;
  transform: rotateZ(0deg);
  box-shadow: none;
}

/* Blur Controls */

.blur-container{
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 1em;
  right: 1em;
  box-shadow: 0 0 20px 0 hsla(0, 0%, 0%, 0.66);
  z-index: 2;
}

.controls-header {
  color: white;
  font-size: 15px;
  background: hsl(2, 49%, 56%);
  padding: 5px;
  margin: 0;
}

.controls {
  display: flex;
  flex-direction: row;
  height: 40px;
}

.control-button {
  width: 50px;
  font-size: 30px;
  line-height: 40px;
  background: hsl(216, 14%, 24%);
  border: none;
  cursor: pointer;
  color: white;
  margin: 0;
  padding: 0;
}

.blur-button:hover {
  background: hsl(216, 14%, 44%);
}

.indicator {
  background: hsl(219, 15%, 15%);
  width: 80px;
  color: white;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
}

/* Card controller */

.quantity-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 1em;
  left: 1em;
  box-shadow: 0 0 20px 0 hsla(0, 0%, 0%, 0.66);
  z-index: 2;
}

            
          
!
            
              // global variables
let currentDepth;
let targetElement;
let manualBlur;
let elementQuantity;

// Initialize
setTimeout(function() {
  setPerspective();
  setInteractiveElements();
  generateRandomIndex();
}, 0);

// Applies heights and margins to all elements in dof-container in increasing increments
function setPerspective() {
  let element = document.getElementById("dof-container"); // target container
  let nodes = element.getElementsByClassName('card-common').length; // target elements in container
  let value = document.getElementById(`quantity-level`);
  let finalWidth;
  let finalMargin;
  let initialWidth
  let marginModifier = 1.4;
  let widthModifier;
  let count = 0;

  // set quantity controller
  elementQuantity = nodes;
  value.innerHTML = nodes;

  if (nodes < 7) {
    initialWidth = 100;
    widthModifier = 23;
  }
  if (nodes > 6 && nodes < 13) {
    initialWidth = 80;
    widthModifier = 16;
  }
  if (nodes > 12 && nodes < 18) {
    initialWidth = 60;
    widthModifier = 10;
  }
  if (nodes > 17 && nodes < 21) {
    initialWidth = 30;
    widthModifier = 10;
  }

  for (let i = 0; i < nodes; i++) {
    count++;
    finalWidth = widthModifier * count + initialWidth;
    finalMargin = finalWidth / marginModifier;
    let z = element.getElementsByClassName('card-common')[i];
    z.style.width = `${finalWidth}px`;
    z.style.margin = `0 -${finalMargin}px 0 0`;
  }
}

function setInteractiveElements() {
  let element = document.getElementById("dof-container"); // target container
  let nodes = element.getElementsByClassName('card-common'); // target elements in container

  // Adds 'reveal' class to all elements in dof-container except last element
  // as there is no need for the last element to dodge left to reveal itself
  for (let i = 0; i < (nodes.length - 1); i++) {
    let z = nodes[i];
    classAttribute = z.getAttribute("class");
    console.log(`class = ${classAttribute}`)

    // Check if element already has the class attribute value of "reveal"
    if (classAttribute.includes("reveal")) {
    } else {
      z.className += " reveal";
    }
  }

  // Adds and sets onmouseover attribute to all elements in dof-container
  for (let i = 0; i < nodes.length; i++) {
    let z = nodes[i];
    let attribute = document.createAttribute("onmouseover");
    attribute.value = "getChildNodeIndex(this);";
    z.setAttributeNode(attribute);
  }
}

// Picks a random number from 0 to the number of nodes in the container.
// This value is used to set an initial random 'focus' point on page load
function generateRandomIndex() {
  let element = document.getElementById("dof-container"); // target container
  let nodes = element.getElementsByClassName('card-common').length; // target elements in container
  let randomIndex = Math.floor(Math.random() * (0 - nodes) + nodes);
  targetElement = randomIndex;
  generateDepthOfField(randomIndex);
}

// Takes the selected child node's index as parameter, then executes the appropriate blur method
function generateDepthOfField(childIndex, handshake) {
  let element = document.getElementById("dof-container");
  let nodes = element.getElementsByClassName('card-common').length; // target elements in container
  let blurLevel = document.getElementById(`blur-level`);
  let countOne = -1;
  let countTwo = -1;
  let above = [];
  let below = [];
  let blur;
  let blurState;
  let blurModifier;

  // Blur settings
  if (manualBlur == null) {
    if (nodes < 7) {
      blurModifier = 2;
      blurLevel.innerHTML = blurModifier;
    }
    if (nodes > 6 && nodes < 13) {
      blurModifier = 2;
      blurLevel.innerHTML = blurModifier;
    }
    if (nodes > 12) {
      blurModifier = .5;
      blurLevel.innerHTML = blurModifier;
    }
  }
  if (manualBlur > -1) {
    blurModifier = manualBlur;
  }

  // the following for loops blur elements above and below the
  // target element in increasing increments set in one of the above if statements
  for (let i = childIndex; i > -1; i--) {
    countOne++;
    blur = blurModifier * countOne;
    let z = element.getElementsByClassName(`card-common`)[i];
    z.style.filter = `blur(${blur}px)`;
    if (blur != 0) {
      below.push(blur);
    }
  }
  for (let i = childIndex; i < nodes; i++) {
    countTwo++;
    blur = blurModifier * countTwo;
    let z = element.getElementsByClassName(`card-common`)[i];
    z.style.filter = `blur(${blur}px)`;
    if (blur != 0) {
      above.push(blur);
    }
  }

  if ((above.length + below.length) == (nodes - 1)) {
    blurState = below.concat(0, above);
    currentDepth = blurState;
    if (handshake = 1) {
      setTimeout(function() {
        createDepthArray(targetElement);
      }, 150);
    }
  }
}

// Get index of targeted element within the dof-container
function getChildNodeIndex(target) {
  let container = target.parentNode;
  let childList = container.childNodes;
  // console.log(child_list);
  let count = -1;

  // Step through all the child childNodes of the parent
  for (let i = 0; i < childList.length; i++) {
    let node = childList.item(i);
    if (node) {
      // Check to see if the node is a LI
      if (node.nodeName == `IMG`) {
        // Increment the count of LI childNodes
        count++;
        if (target == node) {
          // If so, pass count to generateDepthOfField()
          targetElement = count;
          createDepthArray(count);
        }
      }
    }
  }
}

// creates an array containing the blur values for each element in the container
function createDepthArray(childIndex) {
  let element = document.getElementById("dof-container");
  let nodes = element.getElementsByClassName('card-common').length; // target elements in container
  let countOne = -1;
  let countTwo = -1;
  let above = [];
  let below = [];
  let blur;
  let blurState;
  let blurModifier;

  // Blur settings
  if (nodes < 7) {
    blurModifier = 3;
  }
  if (nodes > 6 && nodes < 13) {
    blurModifier = 2;
  }
  if (nodes > 12) {
    blurModifier = 1;
  }

  for (let i = childIndex; i > -1; i--) {
    countOne++;
    blur = blurModifier * countOne;
    if (blur != 0) {
      below.push(blur);
    }
  }
  for (let i = childIndex; i < nodes; i++) {
    countTwo++;
    blur = blurModifier * countTwo;
    if (blur != 0) {
      above.push(blur);
    }
  }
  if ((above.length + below.length) == (nodes - 1)) {
    let reverseBelow = below.reverse();
    blurState = below.concat(0, above);
    arrayTransform(blurState);
  }
}

function arrayTransform(targetState) {
  let handshake = 1;
  let element = document.getElementById("dof-container"); // target container
  let nodes = element.getElementsByClassName('card-common').length; // target elements in container
  // let targetState = x;

  // Find index of 0 [focus point] in each array
  let current = currentDepth.indexOf(0);
  let target = targetState.indexOf(0);

  // increase index of 0 by 1
  if (current < target) {
    current = current + 1;
    generateDepthOfField(current, handshake);
  }
  // decrease index of 0 by 1
  if (current > target) {
    current = current - 1;
    generateDepthOfField(current, handshake);
  }
}

// Depth of Field Controls
function increaseDepth() {
  let value = document.getElementById(`blur-level`);
  x = Number(value.innerHTML);
  // increment depth of field intensity by .5
  value.innerHTML = x + .5;
  manualBlur = value.innerHTML
  generateDepthOfField(targetElement);
}

function decreaseDepth() {
  let value = document.getElementById(`blur-level`);
  x = Number(value.innerHTML);
  // decrement depth of field intensity by .5
  if (x > 0) {
    value.innerHTML = x - .5;
    manualBlur = value.innerHTML
    generateDepthOfField(targetElement);
  }
}

// Card quantity controls
function increaseQuantity() {
  let element = document.getElementById('dof-container');
  let nodes = element.getElementsByClassName('card-common').length; // target elements in container
  let value = document.getElementById(`quantity-level`);
  let newElement = document.createElement("img");
  let srcAttribute = document.createAttribute("src");
  let classAttribute = document.createAttribute("class");

  // Add new elements. Hard cap of 20 elements total
  if (nodes<=19) {
    srcAttribute.value = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/joker.png";
    classAttribute.value = "card-common";
    newElement.setAttributeNode(srcAttribute);
    newElement.setAttributeNode(classAttribute)
    element.appendChild(newElement);

    targetElement = nodes;

    // Reinitialize all
    setPerspective();
    setInteractiveElements();
    generateDepthOfField(targetElement);
    console.log(`current target = ${targetElement}`);
  }
}

function decreaseQuantity() {
  let value = document.getElementById(`quantity-level`);
  let element = document.getElementById("dof-container");
  let nodes = element.getElementsByClassName('card-common');

  // If the number of elements is greater than 0
  if (nodes.length > 0) {
    element.removeChild(nodes[0]);
    value.innerHTML--;

    targetElement = nodes.length - 1;
    console.log(`nodes.length = ${nodes.length}`);

    // Reinitialize remaining elements
    setPerspective();
    generateDepthOfField(targetElement);
  }
}

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console