smlparry

<template>
  <div class="payment-element mt-3" data-cy="payment-element">
    <div v-if="showAddressElement" class="payment-element__address mb-2">
      <div ref="addressElement" id="address-element"></div>
    </div>

    <div class="payment-element__wrapper">
      <div ref="paymentElement" id="payment-element"></div>
    </div>

smlparry

1: 4px
2: 8px
3: 12px
4: 16px
5: 24px
6: 32px
7: 40px
8: 48px
9: 64px
10: 80px

smlparry

.parallax-container {
  // ...
  -webkit-overflow-scrolling: touch;
}

smlparry

.image {
  position: absolute;
  transform-origin: 0 50%;
  width: 420px;
  height: 420px;
}

.background__image {
  @extend .image;
  height: 840px;

smlparry

<div class="parallax-container">
  <div class="wrapper">
    <img class="background__image" src="https://path/to/background.png">
    <img class="middle__image" src="https://path/to/middle.png" />
    <img class="foreground__image" src="https://path/to/foreground.png" />
  </div>
</div>

smlparry

$parallax-perspective: 8px;

@function parallax-scale-factor($z-distance) {
  @return ($parallax-perspective  -  $z-distance) / $parallax-perspective;
}

smlparry

.foreground {
  // ...
  transform: translateZ(3px) scale(0.625);
}

smlparry

.parallax-container {
  // ...
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

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;
}