libp2p-website/layouts/partials/contributors.html

<style>
  @keyframes slide {
      0% { transform: translate(0,0); }
    100% { transform: translate(-100%,0);}
  }
  #contributors-slide {
    transform: translate3d(0,0,0); /* hint to prefer gpu rending. */
    animation: slide 60s ease-in-out both 0s infinite alternate;
    animation-play-state: paused;
  }
  #contributors-slide.running {
    animation-play-state: running;
  }
  #contributors-slide.running:hover {
    animation-play-state: paused;
  }
  #contributors .hex {
    display: inline-block;
    width: 62px;
    height: 72px;
    opacity: 0;
    transition: opacity 1000ms ease-in, transform 100ms ease-out;
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }
  #contributors .hex.show {
    opacity: 1;
    position: relative;
    z-index: 0;
  }
  #contributors .hex.show:hover {
    transform: scale(1.2);
    z-index: 10;
  }
  #contributors .contributors-row {
    height: 72px;
    overflow:visible;
  }
  #contributors .contributors-row:hover {
    z-index: 20;
  }
</style>

<section id="contributors" style="margin-top:90px; padding:10px 0; height: 320px; position: relative; overflow: hidden;">
  <div id="contributors-slide">
    <div class="contributors-row"></div>
    <div class="contributors-row" style="position:absolute;"></div>
    <div class="contributors-row" style="position:absolute;"></div>
    <div class="contributors-row" style="position:absolute;"></div>
    <div class="contributors-row" style="position:absolute;"></div>
  </div>
</section>

{{/*
  Pull in the contributors array into a hugo var at build time.
  It's rendered inline as a JS array. We build out the content after the page
  has rendered to avoid loading 400+ images on intial load.
  The data looks like:
  ```js
  [
    {"url":"https://github.com/0intro","photo":"https://avatars.githubusercontent.com/u/6043744?v=3","username":"0intro"}
  ]
  ```
*/}}
{{ $contributors := getJSON "https://contributors.cloud.ipfs.team/contributors?org=all" }}
<script>
  (function () {
    var contributors = {{ $contributors }}
    var hexWidth = 62
    var hexHeight = 72
    var loadingDelayMs = 50
    var containerEl = document.getElementById('contributors-slide')
    var containerElTop = containerEl.getBoundingClientRect().top
    var screenHeight = window.innerHeight
    var pageYOffset = window.pageYOffset
    var inView = (pageYOffset + screenHeight + 500) > containerElTop
    if (inView) {
      renderContributors(contributors)
    } else {
      window.addEventListener('scroll', isContributorsSectionInView)
    }

    function isContributorsSectionInView () {
      inView = (window.pageYOffset + screenHeight + 500) > containerElTop
      if (inView) {
        renderContributors(contributors)
        window.removeEventListener('scroll', isContributorsSectionInView)
      }
    }

    function renderContributors (data) {
      containerEl.className = 'running'
      var rows = document.querySelectorAll('.contributors-row')
      var rowWidth = Math.ceil(data.length / rows.length) * hexWidth
      ;[].forEach.call(rows, function (row, i) {
        row.style.height = hexHeight + 'px'
        row.style.width = rowWidth + 'px'
        row.style.top = i * hexHeight * 0.75 + 'px'
        if ((i % 2) === 1) {
          row.style.left = hexWidth / 2 + 'px'
        }
      })
      var nextRow = 0
      var lastRender = 0
      function renderWithPause(itemIndex) {
        if (itemIndex >= data.length) return
        renderContributor(data[itemIndex], function (err, el) {
          var nextIndex = itemIndex + 1
          if (err) renderWithPause(nextIndex)
          rows[nextRow].appendChild(el)
          setTimeout(function () {
            el.className = 'hex show'
          }, 10)
          var now = Date.now()
          var diff = now - lastRender
          var delay = loadingDelayMs - diff
          if (delay < 0) delay = 0
          lastRender = now
          nextRow = (nextRow + 1) % rows.length
          setTimeout(function () {
            renderWithPause(itemIndex + 1)
          }, delay)
        })
      }
      renderWithPause(0, Date.now())
    }

    function renderContributor (item, cb) {
      var link = document.createElement('a')
      link.className = 'hex'
      link.href = 'https://github.com/' + item.username
      link.target = '_blank'
      link.title = item.username
      link.style.width = hexWidth + 'px'
      link.style.height = hexHeight + 'px'

      var img = new Image()
      img.onload = function () {
        link.style.background = '#333 url(' + item.photo + ') no-repeat center'
        link.style.backgroundSize = 'cover'
        cb(null, link)
      }
      img.onerror = function (evt) {
        cb(evt, link)
      }
      img.src = item.photo
    }
  })()

</script>