[LeaderLine]JavaScriptで要素間を線でつなげるライブラリ

window.addEventListener('load', () => {
  const line01 = new LeaderLine(
    document.getElementById('ex-080-1'),
    document.getElementById('ex-080-2'),
    { color: '#5146c0', fontWeight: '900', size: 5, dropShadow: true, startPlugColor: '#5146c0', endPlugColor: '#096299', gradient: true, startLabel: LeaderLine.pathLabel('LeaderLine',{fontWeight: 900, fontSize: '1.5rem'})}
  );
  const line02 = new LeaderLine(
    document.getElementById('ex-080-2'),
    document.getElementById('ex-080-3'),
    {color: '#ff7f50', size: 5, dash: {animation: true}}
  );
  const line03 = new LeaderLine(
    document.getElementById('ex-080-4'),
    document.getElementById('ex-080-5'),
    { color: '#a50096', size: 5, dropShadow: true, startPlugColor: '#a50096', endPlugColor: '#8903ff', gradient: true }
  );
  const line04 = new LeaderLine(
    document.getElementById('ex-080-5'),
    document.getElementById('ex-080-6'),
    {color: '#ff7f50', size: 5, dash: {animation: true}, startLabel: LeaderLine.pathLabel('LeaderLine', {fontWeight: 900, fontSize: '1.5rem'})} 
  );

  setInterval(() => line01.position(), 250);
  setInterval(() => line02.position(), 250);
  setInterval(() => line03.position(), 250);
  setInterval(() => line04.position(), 250);


  // ページ遷移時に各 line を削除
  window.addEventListener('beforeunload', () => {
    line01.remove();
    line02.remove();
    line03.remove();
    line04.remove();
  });
});

<div class="waves-content">
  <div id="ex-080-1" class="anchor40"></div>
  <div id="ex-080-2" class="anchor40"></div>
  <div id="ex-080-3" class="anchor40"></div>
  <div id="ex-080-4" class="anchor40"></div>
  <div id="ex-080-5" class="anchor40"></div>
  <div id="ex-080-6" class="anchor40"></div>
</div>

.waves-content {
    position: relative;
    height: 150px;
    margin: 30px 0px;
}
#ex-080-1 {
    left: 0; 
    top: 0;
}
#ex-080-2 {
    left: 50%; 
    bottom: 0;
}
#ex-080-3 {
    right: 0;
    top: 0;
}
#ex-080-4 {
    left: 0;
    bottom: 0;
}
#ex-080-5 {
    left: 50%; 
    top: 0;
}
#ex-080-6 {
    right: 0;
    bottom: 0;
}
.anchor40 {
    width: 40px;
    height: 40px;
}
.anchor40 {
    position: absolute;
    background-color: #db2828;
    box-sizing: border-box;
    padding: 5px 0;
    font-size: 24px;
    line-height: 1;
    text-align: center;
}