Question

要求

在没有JS的情况下必须看起来清晰（可以轻松地将JS顶部的enabled = false设置为再次检查）
全屏图像在页面加载时必须显示为固定状态
卡片必须排成两排并交替放置（出于响应原因，布局不能基于列）
卡片全100vh，宽50％
图片1的宽度错开一半，然后卡片轮流固定和滚动
滚动所有卡片后，便会显示“显示”

我觉得也许我错过了一些使它更容易扩展的东西，因为如果我最终得到了6行卡片，那么所有场景的代码都变得笨拙。即使使用for循环，代码也非常不可读。是否有一种技术可以使此操作更容易且更易于管理？

此外，当浏览器调整大小时，生产环境会遇到严重的对齐问题。您可以使用the full page codepen，然后：

在开发工具关闭
打开开发工具

我听说它讨论过这种调整大小的问题应该在CSS中解决，但是我不清楚这是否适用于这种情况，如果适用，甚至从哪里开始。

任何指针将不胜感激。

<div class="container">
  <div class="img-full">Fullscreen Image</div>
  <div class="rows">
    <div class="row row-1">
      <div class="card card-content pin-1-1">Content 1</div>
      <div class="card card-image pin-1-2">Image 1</div>
    </div>
    <div class="row row-2">
      <div class="card card-content pin-2-1">Content 2</div>
      <div class="card card-image pin-2-2">Image 2</div>
    </div>
  </div>
</div>
<footer>Footer</footer>

body {
  margin: 0;
}
.container {
  margin-bottom: 20vh;
}
.img-full {
  width: 100%;
  height: 100vh;
  background-color: #e6eae1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rows {
  position: relative;
}
.row {
  display: flex;
  flex-wrap: nowrap;
}
.row:nth-child(even) {
  flex-direction: row-reverse;
}
.card {
  width: 50%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-content {
  background: #ccc;
}
.card-image {
  background-color: #70A9A1;
}
footer {
  background: #C52;
  height: 20vh;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
}

(function() {

  var enabled = true;

  var controller = new ScrollMagic.Controller();
  if(enabled) {
    new ScrollMagic.Scene({
      triggerElement: '.img-full',
      triggerHook: 'onLeave',
      duration: '150%',
    })
      .setPin('.img-full', {pushFollowers: false})
      .addTo(controller);

    new ScrollMagic.Scene({
      triggerElement: '.pin-1-2',
      triggerHook: 'onEnter',
      duration: '50%',
    })
      .setPin('.pin-1-2', {pushFollowers: false})
      .addTo(controller);

    new ScrollMagic.Scene({
      triggerElement: '.pin-1-1',
      triggerHook: 'onLeave',
      duration: '50%',
    })
      .setPin('.pin-1-1', {pushFollowers: false})
      .addTo(controller);

    new ScrollMagic.Scene({
      triggerElement: '.pin-1-2',
      triggerHook: 'onLeave',
      duration: '100%',
      offset: (document.querySelector('.pin-1-2').offsetHeight / 2),
    })
      .setPin('.pin-1-2', {pushFollowers: false})
      .addTo(controller);

    new ScrollMagic.Scene({
      triggerElement: '.pin-2-2',
      triggerHook: 'onEnter',
      duration: '50%',
    })
      .setPin('.pin-2-2', {pushFollowers: true})
      .addTo(controller);

    new ScrollMagic.Scene({
      triggerElement: '.pin-2-2',
      triggerHook: 'onLeave',
      duration: '100%',
      offset: (document.querySelector('.pin-2-2').offsetHeight / 2),
    })
      .setPin('.pin-2-2', {pushFollowers: true})
      .addTo(controller);

    new ScrollMagic.Scene({
      triggerElement: '.pin-2-1',
      triggerHook: 'onEnter',
      duration: '150%',
    })
      .setPin('.pin-2-1', {pushFollowers: true})
      .addTo(controller);
  }
})();

有没有更好的方法可以使用ScrollMagic交错列并调整布局大小？

要求

0 个答案: