Question

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

当我在chrome上使用“开发人员工具”在移动视图中查看该页面时，由于触发似乎有些滞后，因此视差不起作用。

我已经在线查看了如何在移动视图中解决视差并遇到了Parallax scrolling not working on mobile css

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

正如您在此代码笔上看到的那样，当屏幕较小（调整浏览器大小）时，我创建了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();

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

Answer 1

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

@media屏幕和（最大宽度：500像素）{

}

这意味着css仅在屏幕尺寸小于500px（电话宽度）时显示

Answer 2

您需要销毁控制器，以使视差不再起作用，即使视口宽度小于800px，也不会创建视差（在CSS和JS中根据需要更改此变量）

要破坏控制器，您可以使用

HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"

这是codepen： https://codepen.io/anon/pen/XLvaEQ

使HTML响应视口

2 个答案: