ac timeline

In this example below you will see how to do a ac timeline with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ANTINEA, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ANTINEA ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>ac timeline</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<script src="https://www.alariusconsulting.com/js/d3.v2.min.js"></script>
<script src="https://www.alariusconsulting.com/js/fisheye.js"></script>
<div class="cont">
  <svg id="timeline" width="100%" height="300px">
    <defs>
     <linearGradient id="grad1"
                      x1="0%" y1="00%"
                      x2="0%" y2="100%" 
                      spreadMethod="pad">
        <stop offset="0%" stop-color="rgba(255,255,255,0.7)" stop-opacity="0.9"/>
        <stop offset="80%" stop-color="rgba(255,255,255,0)" stop-opacity="0.9"/>
      </linearGradient>
     
    <linearGradient id="Gradient1"
                    x1="0%" y1="100%"
                    x2="100%" y2="100%"
                    spreadMethod="pad">
      <stop offset="0%"   stop-color="rgba(220, 0,0,1)" stop-opacity="1"/>
      <stop offset="100%" stop-color="rgba(220, 0,0,1)" stop-opacity="0.5"/>
    </linearGradient>
<linearGradient id="Gradient2"
                    x1="0%" y1="100%"
                    x2="100%" y2="100%"
                    spreadMethod="pad">
      <stop offset="0%"   stop-color="rgba(250, 100,0,1)" stop-opacity="1"/>
      <stop offset="100%" stop-color="rgba(250, 100,0,1)" stop-opacity="0.5"/>
    </linearGradient>
          </linearGradient>
<linearGradient id="Gradient3"
                    x1="0%" y1="100%"
                    x2="100%" y2="100%"
                    spreadMethod="pad">
      <stop offset="0%"   stop-color="rgba(250, 150,0,0.9)" stop-opacity="1"/>
      <stop offset="100%" stop-color="rgba(250, 150,0,0.9)" stop-opacity="0.5"/>
    </linearGradient>
    <linearGradient id="Gradient4"
                    x1="0%" y1="100%"
                    x2="100%" y2="100%"
                    spreadMethod="pad">
      <stop offset="0%"   stop-color="rgba(0, 100,20,0.95)" stop-opacity="1"/>
      <stop offset="100%" stop-color="rgba(0, 100,20,0.8)" stop-opacity="0.2"/>
    </linearGradient>
        <linearGradient id="Gradient5"
                    x1="0%" y1="100%"
                    x2="100%" y2="100%"
                    spreadMethod="pad">
      <stop offset="0%"   stop-color="rgba(55, 107, 200,0.95)" stop-opacity="1"/>
      <stop offset="100%" stop-color="rgba(55, 107, 200,0.95)" stop-opacity="0.2"/>
    </linearGradient>
        <linearGradient id="Gradient6"
                    x1="0%" y1="100%"
                    x2="100%" y2="100%"
                    spreadMethod="pad">
      <stop offset="0%"   stop-color="#5B48B2" stop-opacity="1"/>
      <stop offset="100%" stop-color="#5B48B2" stop-opacity="0.2"/>
    </linearGradient>
    </defs>
    <rect x="0%" y="0%" width="100%" height="100%" fill="url(#grad1)"/>
     <rect class="com" x="2.54%" y="80%" width="100%" height="10%" fill="url(#Gradient1)"/>
         <rect class="com" x="2.54%" y="70%" width="100%" height="10%" fill="url(#Gradient2)"/>
     <rect class="com" x="43.65%" y="60%" width="100%" height="10%" fill="url(#Gradient3)"/>
         <rect class="com" x="43.65%" y="50%" width="100%" height="10%" fill="url(#Gradient4)"/>
             <rect class="com" x="72.7%" y="40%" width="100%" height="10%" fill="url(#Gradient5)"/>
               <rect class="com" x="72.7%" y="30%" width="100%" height="10%" fill="url(#Gradient6)"/>

  <line x1="0%" x2="100%" y1="90%" y2="90%" stroke-width="2px" stroke="white" />
  <line class="h" x1="2.54%" x2="2.54%" y1="70%" y2="90%" />
  <text class="t" x="2.54%" y="97%" text-anchor="start" fill="white" font-size="18px">2005</text>

  <line class="h" x1="43.65%" x2="43.65%" y1="50%" y2="90%" stroke="white" />
  <text class="t" x="43.65%" y="97%" text-anchor="middle" fill="white" font-size="18px">2015</text>
  <line class="h" x1="72.70%" x2="72.7%" y1="30%" y2="90%" />
  <text class="t" x="72.7%" y="97%" text-anchor="middle" fill="white" font-size="18px">2018</text>
   <svg class="comBox" id="cb1" style="opacity:0.05;font-size:10px;" x="2.54%"  height="200px" fill="white">
    <g>
  <text class="comText"  x="0%" y="10%">
    <tspan x="0%" fill="#333" style="font-weight: bold;">Creation:July 2005</tspan>
    <tspan x="1%" dy="20">&#9702 artificial intelligence</tspan>
    <tspan x="1%" dy="18">&#9702 blockchain</tspan>
    <tspan x="1%" dy="18">&#9702 cryptocurrencies</tspan>
  </text>
    </g>
  </svg>
   <svg class="comBox" id="cb2" style="opacity:0.05;font-size:10px;" x="43.65%"  height="200px" fill="white">
    <g>
  <text class="comText"  x="0%" y="10%">
    <tspan x="0%" fill="#333" style="font-weight: bold;">developping towards:</tspan>
    <tspan x="1%" dy="20">&#9702 artificial intelligence</tspan>
    <tspan x="1%" dy="18">&#9702 blockchain</tspan>
    <tspan x="1%" dy="18">&#9702 cryptocurrencies</tspan>
  </text>
    </g>
  </svg>
  <svg class="comBox" id="cb3" style="opacity:0.05;font-size:10px;" x="72.7%"  height="200px" fill="white">
    <g>
  <text class="comText"  x="0%" y="10%">
    <tspan x="0%" fill="#333" style="font-weight: bold;">developping towards:</tspan>
    <tspan x="1%" dy="20">&#9702 artificial intelligence</tspan>
    <tspan x="1%" dy="18">&#9702 blockchain</tspan>
    <tspan x="1%" dy="18">&#9702 cryptocurrencies</tspan>
  </text>
    </g>
  </svg>
  <text class="rowText" x="3.6%" y="77%"> IT and financial consulting</text>
  <text class="rowText" x="3.6%" y="87%"> financial and VBA training</text>
  <text class="rowText" x="44.75%" y="87%"> R and web training</text>
  <text class="rowText" x="44.75%" y="67%"> VBA devs</text>
  <text class="rowText" x="44.75%" y="57%"> market signals</text>
  <text class="rowText" x="73.8%" y="87%"> IA training</text>
  <text class="rowText" x="73.8%" y="67%"> web devs</text>
  <text class="rowText" x="73.8%" y="77%"> web consulting</text>
  <text class="rowText" x="73.8%" y="47%"> flex reportings</text>
  <text class="rowText" x="73.8%" y="37%"> risk systems</text>
  </svg>

</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ANTINEA/ac-timeline-NMbgjM */
* {box-sizing: border-box;font-family: 'Quicksand', sans-serif ;}
body{background:#444;}
.cont{display:flex;width:600px;height:300px;border:1px solid white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
#timeline{}
rect{stroke:rgba(255,255,255,0.5);stroke-width:0.5px;}
.comBox{transition: opacity 1s;transition-timing-function: ease-out;}
.rowText{fill:white;font-size:14px;cursor:pointer;}
.h{stroke-width:1.5px;stroke:rgba(255,255,255,0.75);}

/*Downloaded from https://www.codeseek.co/ANTINEA/ac-timeline-NMbgjM */
//utilitaires--------------------------------------------------------------------------
function GEBI(id) {
  return document.getElementById(id);
}
function pGEBI(parent,id) {
  return parent.getElementById(id);
}
function QSA(thisclass) {
  return document.querySelectorAll(thisclass);
}
function QS(thisclass) {
  return document.querySelector(thisclass);
}
function pQS(parent,thisclass) {
  return parent.querySelector(thisclass);
}
chartsH();
function chartsH() {
  var svg = d3.select("#timeline");
  var width = GEBI("timeline").parentElement.clientWidth;
  var height = GEBI("timeline").parentElement.clientHeight;
  var xSpan = 6.25;

  var xSteps = ["2.54","5.24","8.13","11.24","14.6","18.24","22.24","26.67","31.59","37.19","43.65","51.29","60.64","72.7","89.7"];
  var dSteps=["2.54","43.65","72.7"];
  var cSteps=["2.54","2.54","43.65","43.65","72.7","72.7"];
  //var cBoxSteps=["72.7"];
  var rowTextSteps=["3.6","3.6","44.75","44.75","44.75","73.8","73.8","73.8","73.8","73.8"];

  var j;
  var xLine = svg
    .selectAll(".x")
    .data(xSteps)
    .enter()
    .append("line")
    .attr("class", "x")
.attr("stroke","rgba(200,200,200,0.25)")
    .attr("y2", height)
    .attr("x1", function(d, i) {
      return xSteps[i]+"%";
    })
    .attr("x2", function(d, i) {
      return xSteps[i]+"%";
    });
  var xFisheye = d3.fisheye
    .scale(d3.scale.identity)
    .domain([0, 100])
    .focus(50);
  var hLine = svg.selectAll(".h").data(dSteps);
  var years = svg.selectAll(".t").data(dSteps);
  var coms = svg.selectAll(".com").data(cSteps);
  var rowTexts = svg.selectAll(".rowText").data(rowTextSteps);
  var comBoxes = svg.selectAll(".comBox").data(dSteps);
  svg.on("mousemove", function() {
    var mouse = d3.mouse(this);
    xFisheye.distortion(2.5).focus(mouse[0]/width*100);
    redraw();
  });

  svg.on("mouseleave", function() {
    reset();
  });
  function redraw() {
    var factor=[1,1,1];
    var factorInit=[41.11*width/100,29.05*width/100,27.3*width/100];
   var xMouse = event.clientX/width*100; 
   
    xLine.attr("x1", function(d, i) {
       return xFisheye(xSteps[i])/100*width;
    }).attr("x2", function(d, i) {
       return  xFisheye(xSteps[i])/100*width;
    });
     hLine.attr("x1", function(d, i) {
       factor[i]=1/100*width*((xFisheye(dSteps[i+1])||100)-(xFisheye(dSteps[i])))/factorInit[i];
   //    console.log(factor);
       return xFisheye(dSteps[i])/100*width;
    }).attr("x2", function(d, i) {
       return  xFisheye(dSteps[i])/100*width;
    });

       years.attr("x", function(d, i) {
       return xFisheye(dSteps[i])/100*width;
    });
          coms.attr("x", function(d, i) {
       return xFisheye(cSteps[i])/100*width;
    });
    rowTexts.attr("x", function(d, i) {
       return xFisheye(rowTextSteps[i])/100*width;
    }).style("font-size",function(d, i) {

       if(i<2){ return Math.min(16,10*factor[0])+"px";}else if(i<5){return Math.min(16,10*factor[1])+"px";}else{return Math.min(16,10*factor[2])+"px";}
      });
     comBoxes.attr("x", function(d, i) {
       return xFisheye(dSteps[i])/100*width;
    }).style("font-size",function(d, i) {
       return Math.min(16,14*factor[i])+"px";
    }).style("opacity",function(d, i) {
       return (factor[i]>1?1:0.5*factor[i]) });

  }
  function reset() {
        xLine
      .transition().ease("elastic")
      .duration(2000)
      .attr("x1", function(d, i) {
        return xSteps[i]+"%";
      })
      .attr("x2", function(d, i) {
        return xSteps[i]+"%";
      });
         hLine
      .transition()
    .ease("elastic")
      .duration(2000)
      .attr("x1", function(d, i) {
        return dSteps[i]+"%";
      })
      .attr("x2", function(d, i) {
        return dSteps[i]+"%";
      });
         years
      .transition().ease("elastic")
      .duration(2000)
      .attr("x", function(d, i) {
        return dSteps[i]+"%";
      });
        coms
      .transition().ease("elastic")
      .duration(2000)
      .attr("x", function(d, i) {
        return cSteps[i]+"%";
      });
         rowTexts
      .transition().ease("elastic")
      .duration(2000)
      .attr("x", function(d, i) {
        return rowTextSteps[i]+"%";
      }).style("font-size","14px");
        comBoxes
      .transition().ease("elastic")
      .duration(2000)
      .attr("x", function(d, i) {
        return dSteps[i]+"%";
      }).style("font-size","10px").style("opacity","0");
  }

  }
function setOpacity(target){
  target.style.opacity="1";
}

Comments