smlparry

<div class="parallax-container">
  <div class="background">
    <img class="background__image" src="https://path/to/image.jpg" />
  </div>
  <div class="foreground">
    <div class="foreground__content">
      <h1>Oooo, parallax</h1>
    </div>
  </div>
</div>

smlparry

.parallax-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 8px;
  perspective-origin: 0%;
  display: flex;
}

smlparry

.element {
  // ...
  transform: translateZ(0px);
  animation: animateZ 2s infinite;
}

@keyframes animateZ {
  from {
    transform: translateZ(0px);
  }

smlparry

# CSS
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  height: 200px;
  width: 200px;
  perspective: 8px;
  perspective-origin: 50%;

smlparry

$(document).ready(function() {
  var $grid = $('.grid')
  var $gridItem = $('.grid__item')
  
  var gridItemHeight = $gridItem.height()
  var gridItemWidth = $gridItem.width()
  
  var horzCount = Math.floor($grid.width() / gridItemWidth)
  var vertCount = Math.floor($grid.height() / gridItemHeight)
  

smlparry

/* ... */

.grid__item {
  /* ... */
  
  transition: opacity 2s ease 0.4s, transform 0.8s ease;
  transform: scale(1);
}

.grid__item:hover {

smlparry

/* ... */

.grid__item {
  /* ... */
  
  opacity: 0;
  transition: opacity 0.4s ease;
}

.grid__item:hover {

smlparry

.grid {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
  height: 400px;
}

.grid__item {
  height: 60px;
  width: 60px;

smlparry

.grid
  - 56.times do
    .grid__item

smlparry

<template>
<!-- HTML Emitted -->
</template>

<script>
// ...

export default {

  // ...