CSS-só paralaxe (horizontal): como corrigir o dimensionamento

Eu estou tentando criar um deslocamento horizontal linha de tempo com um CSS puro efeito de paralaxe, com base no presente artigo. O efeito de paralaxe é o trabalho, mas eu estou ficando pendurado de espaço no final, que eu não posso isolar, exceto para o dimensionamento, o qual é calculado como tudo que eu li diz que deve ser.

HTML

<div class="container-fluid">
    <div class="row c-parallax c-parallax--horizontal marginbottommore" style="height:400px;">
    <div class="c-parallax__container">
      <div class="c-parallax__container__wrapper">
        <img class="c-parallax__container__wrapper__layer--1" src="https://d3n8a8pro7vhmx.cloudfront.net/nzlabour/pages/17763/attachments/original/1568607016/mh-timeline-layer1.png?1568607016" alt="Timeline part 1">
        <img class="c-parallax__container__wrapper__layer--2" src="https://d3n8a8pro7vhmx.cloudfront.net/nzlabour/pages/17763/attachments/original/1568607016/mh-timeline-layer2.png?1568607016" alt="Timeline part 2">
        <img class="c-parallax__container__wrapper__layer--3" src="https://d3n8a8pro7vhmx.cloudfront.net/nzlabour/pages/17763/attachments/original/1568607017/mh-timeline-layer3.png?1568607017" alt="Timeline part 3">
      </div>
    </div>
  </div>
</div>

ESCS

$parallax-perspective: 8px;

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

.c-parallax {
  display: flex;
  justify-content: center;
  align-items: center;
}
.c-parallax__container {
  position: relative;
  width: 100%%;
  height: 100%%;
  perspective: $parallax-perspective;
  perspective-origin: 0 0;
}
.c-parallax--horizontal .c-parallax__container {
  overflow-x: scroll;
  overflow-y: hidden;
}
.c-parallax__container__wrapper__layer {
  position: absolute;
  transform-origin: 0 0;
}
.c-parallax img {
  max-width: unset;
}
.c-parallax__container__wrapper__layer--1 {
  @extend .c-parallax__container__wrapper__layer;
  transform: translateZ(-5px) scale(parallax-scale-factor(-5));
}
.c-parallax__container__wrapper__layer--2 {
  @extend .c-parallax__container__wrapper__layer;
  transform: translateZ(-2px) scale(parallax-scale-factor(-2));
}
.c-parallax__container__wrapper__layer--3 {
  @extend .c-parallax__container__wrapper__layer;
  transform: translateZ(0px) scale(1);
}

Trabalhando demo – vá até o final (direita) para ver o problema – a camada de fundo ultrapassa a camada de topo em vez de alinhar: https://codepen.io/erland/pen/bGbmbOv

0
2019-09-18 02:48:03
origem
0 respostas

Veja mais perguntas por marcas