我创建了我的第一个网页,并使用 ScrollMagic.js 展示了视差/SplitScroll
当我在 chrome 上使用“开发者工具”在移动 View 中查看页面时,视差不起作用,因为触发器似乎有点偏离。
我上网查看如何修复移动 View 中的视差并遇到了这个 Parallax scrolling not working on mobile css
从这个答案中,我发现视差在移动 View 中通常不起作用。并且建议我在达到某个视口(viewport)时禁用视差。
正如您在我创建的代码笔上看到的那样 https://codepen.io/Jaderianne/pen/jjgWpv当屏幕很小(调整浏览器大小)时,视差 View 中的文本看起来相当压扁,所以我认为最好在达到某个视口(viewport)时禁用视差。
由于我仍在学习网络开发,这是我的第一个网页,我不确定如何在较小的屏幕上禁用视差。我想我需要在我的 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 直接显示在“关于我们”下方,反之亦然(在移动 View 中)“服务”部分
最佳答案
我不确定这是否是最好的方法 但是您可以尝试使用相同的 HTML 创建一个新的 div(不包括任何链接到 JavaScript 的内容)但专为移动设备设计并使用“显示:无”隐藏它;然后将所有样式用于非视差移动 View ,以及'display: block;'(对于移动 HTML)和 'display: none; (对于桌面视差 HTML)在:
@media 屏幕和(最大宽度:500 像素){
这意味着该 css 仅在屏幕尺寸小于 500px(手机宽度)时显示
关于javascript - 使 HTML 响应视口(viewport),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57058023/