2D-Wheel 1.09

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Animated Carousel</title>
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        perspective: 800px;
        overflow-x: hidden;
        overflow-y: hidden;
      }
      .stage {}
      .item {}
      .item:hover { background-color: orange !important;}
      .item.inside-overlay {
        background-color: orange !important;
        color: white !important;
      }
      .overlay {
        position: fixed;
        top: 50%;
        right: 5vw;
        width: 35vw;
        height: 2%;
        background-color: rgba(0, 0, 0, 0.1);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateY(-50%);
      }
      @keyframes rotate {
        0% {transform: rotateZ(0deg);}
        100% {transform: rotateZ(360deg);}
      }
    </style>
  
  
    <script>
      let elementOptions=[], divStage=[], divOverlay=[];

      function create_SuperCircle(elementOptions) {
        divStage[elementOptions._id] = create_divStage(elementOptions);
        divOverlay[elementOptions._id] = create_divOverlay(elementOptions._id, elementOptions);
        positionDivsInCircle(elementOptions, divStage[elementOptions._id], divOverlay[elementOptions._id]);
      }

      function create_divStage(options) {
        const elementId = options._id;
        const divStage = document.createElement('div');
        divStage.className = 'stage';
        divStage.id = 'stage' + elementId;
        divStage.innerHTML = elementId;
        check_Object(options, divStage);
        document.body.appendChild(divStage);
        return divStage;
        function check_Object(obj,div) {
          function iterateObject(obj,depth) {
            for (const key in obj) {
          ...

JavaScript

/*
        function check_Object(obj) {        
          for (const key in obj) {          	
            if (obj.hasOwnProperty(key)) {              
              const value = obj[key]; 
               if (typeof value === 'object' && value !== null && key === 'stage') {
              	console.log(key, value);
               }
              if (typeof value === 'object' && value !== null && key === 'animation') {
              	console.log(key, value);
               }
               if (typeof value === 'object' && value !== null && key === 'item') {
              	console.log(key, value);
               }
               if (typeof value === 'object' && value !== null && key === 'style') {
              	console.log(key, value);
               }
          	}
          }
          */
          
          
          
          
       
         /*
            if(key==='stage') {
            	console.log('special KEY found: ' + key)
            	//const value = obj[key][key]; 
              const stage = obj[key];console.log(stage);
              const value = stage.; console.log()
              
              
              
            }
            
            if(key==='item') {
            	console.log('special KEY found: ' + key)
            
            }
            
            
            if(key==='animation') {
            	console.log('special KEY found: ' + key)
            
            }
            */
        
        
        
        
        
        
        
        //if (options.stage) {
          
          
          /*
          for (const key in options.stage) {
            if (options.stage.hasOwnProperty(key)) {
              const value = options.stage[key];
             
             
             
             if (typeof value === 'object' && value !== null && key === 'animation') {
                divStage.style.animation = `${value.animType} ${value.animSpeed} ${value.animMode} ${value.animLoop}`;
              } else {
         ...