使 HTML 响应视口

Question

我创建了我的第一个网页，并使用 ScrollMagic.js 展示了视差/SplitScroll

当我在 chrome 上使用“开发者工具”在移动视图中查看页面时，视差不起作用，因为触发器似乎有点偏离。

我在网上查看了如何在移动视图中修复视差并遇到了这个Parallax scrolling not working on mobile css

从这个答案中，我看到视差在移动视图中通常不起作用。并且建议在达到某个视口时禁用视差。

正如您在此 codepen 上看到的那样，当屏幕很小（调整浏览器大小）时，我创建了 https://codepen.io/Jaderianne/pen/jjgWpv，视差视图中的文本看起来相当扁平，所以我认为最好在某个视口时禁用视差到达了。

由于我仍在学习网络开发，这是我的第一个网页，我不确定如何在较小的屏幕上禁用视差。我想我需要在我的 CSS 中使用@media，但不确定需要在其中包含什么..

有人可以帮帮我吗？

代码在我上面链接的代码笔中可见。

部分 HTML：

<section id="About" class="about">

<div class="about-title">
  <h2>About Us</h2>
</div>

<div class="about-pages">
  <div>
    <h2>About 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, 
soluta ipsam, minima delectus eaque omnis!</p>
  </div>
  <div>
    <h2>About 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, 
soluta ipsam, minima delectus eaque omnis!</p>
  </div>
  <div>
    <h2>About 3</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, 
soluta ipsam, minima delectus eaque omnis!</p>
  </div>
</div>
</section>

可以在 CODEPEN 上看到 CSS。

Javascript：

function splitScroll() {
const controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({
  duration: '200%',
  triggerElement: '.about-title',
  triggerHook: 0
})

.setPin('.about-title')
.addTo(controller)

new ScrollMagic.Scene({
    duration: '200%',
    triggerElement: '.services-title',
    triggerHook: 0
  })

  .setPin('.services-title')
  .addTo(controller)

}

splitScroll();

我希望 About 1、About 2 和 About 3 直接显示在“关于我们”下方，反之亦然出现在“服务”部分（在移动视图中）

Answer 1

我不确定这是否是最好的方法 但是您可以尝试使用相同的 HTML（不包括与 JavaScript 链接的任何内容）创建一个新的 div，但为移动设备设计并使用“显示：无”隐藏它；然后将所有样式用于非视差移动视图，以及'display: block;' （用于移动 HTML）和 'display: none; （对于桌面视差 HTML）内部：

@media screen and (max-width: 500px) {

}

这意味着css只会在屏幕尺寸小于500px（手机宽度）时显示

Answer 2

您需要销毁您的控制器，以便视差不再起作用，如果视口宽度小于 800 像素，则不会创建视差（在 css 和 JS 中根据需要更改此变量）

要销毁你可以使用的控制器

controller.destroy()

这里是代码笔： https://codepen.io/anon/pen/XLvaEQ