<a class="link" target="_blank" rel="noopener" href="https://vinceumo.github.io/devNotes/CSS/css-3d-scrolling-on-the-z-axis/">Read article</a>
<h1>
  <img
       class="logo"
       src="https://vinceumo.github.io/devNotes/images/CSS3d-scrolling-z-axis-example-logo.svg"
       alt="Studio Ghibli Logo"
       />
  Studio Ghibli's Movies
</h1>
<div class="viewport">
  <div class="scene3D-container">
    <div class="scene3D"></div>
  </div>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
// ----------
// Styling
// ----------
@import url("https://fonts.googleapis.com/css?family=Playfair+Display+SC:900");

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  background-color: hsl(231, 15%, 18%);
  color: hsl(231, 15%, 18%);
  padding: 0;
  margin: 0;
}

h1 {
  font-family: "Playfair Display SC", serif;
  font-size: 1.5rem;
  color: hsl(0, 0%, 100%);
  margin: 0;
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  text-align: center;
  .logo {
    display: block;
    margin: 0 auto;
    max-width: 150px;
  }
}

.link {
  color: hsl(0, 0%, 100%);
  margin: 0;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1;
}

.scene3D {
  > div {
    padding: 2rem;

    h2 {
      margin-top: 0;
      font-family: "Playfair Display SC", serif;
      font-size: 1.5rem;
    }

    @for $i from 0 through 25 {
      &:nth-child(#{$i}) {
        background-color: hsl(-30 + ($i * 30), 100%, 88%);
      }
    }
  }
}
View Compiled
let films = [];

document.addEventListener("DOMContentLoaded", function() {
  axios
    .get("https://ghibliapi.herokuapp.com/films")
    .then(function(response) {
      films = response.data;
      appendFilms(films);
    })
    .catch(function(error) {
      console.log(error);
    });
});

function createFilmItem(film) {
  return `<div>
    <h2>${film.title}</h2>
    <p>Year: ${film.release_date}</p>
    <p>Director: ${film.director}</p>
    <p>${film.description}</p>
  </div>`;
}

function appendFilms(films) {
  const filmsEl = document.querySelector(".viewport .scene3D");
  let filmsNodes = [];

  for (film of films) {
    filmsNodes.push(createFilmItem(film));
  }

  filmsEl.innerHTML = filmsNodes.join(" ");
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.