javascript - 我的 .js 文件不会链接到我的 HTML,无法让 scrollmagic 工作
问题描述
我正在尝试在我的网页上使用 ScrollMagic。我已经在 .js 文件中输入了代码,并将这个文件和 ScrollMagic cdn 链接到我的 html,但它对我的页面没有任何影响。
我尝试将 ../ 添加到文件链接并添加不同的脚本
这是 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Sarabun"
rel="stylesheet">
<link rel="stylesheet" href="css/styles2.css">
<title>Example</title>
</head>
<body>
<header>
<h1>Header section</h1>
</header>
<section class="about">
<div class="about-title">
<h2>About Us</h2>
</div>
<div class="about-pages">
<div>
<h2>Project 1</h2>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div>
<h2>Project 1</h2>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div>
<h2>Project 1</h2>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</section>
<footer>
<h2> This is the footer </h2>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<script src="app.js"></script>
</body>
这是 app.js 代码:
function splitScroll(){
const controller = new ScrollMagic.Controller();
new ScrollMagic.Scene({
duration: '200%',
triggerElement: '.about-title'
triggerHook: 0;
})
.setPin('.about-title');
.addIndicators();
.addTo(controller);
}
splitScroll();
我希望页面的左侧在右侧滚动时保持静止,但它会同时滚动。
解决方案
我在您的 JS 代码中看到了一些错误。对象属性应该有一个尾随逗号。你少了一个。最后一个分号后也不应该有分号。
new ScrollMagic.Scene({
duration: '200%',
triggerElement: '.about-title',
triggerHook: 0
})
另一个问题是你有不必要的分号导致链接问题......
.setPin('.about-title')
.addIndicators()
.addTo(controller); // This one may need to be removed also
最后,我看到触发器附加到一个类(.about-title)。我在您的 html 中没有看到该类。
推荐阅读
- oauth-2.0 - 应用程序访问同一应用程序套件中的应用程序
- python - IndexError:字符串索引超出范围(日历函数)
- r - 查找参数,例如 R 中任何分布的均值
- python - Swagger OpenAPI 3.0 不记名身份验证混淆
- permissions - 如何在 samba 中授予组写入权限
- c++ - 在 LevelDB PUT() 时调用了 abort()
- android - DatePickerDialog Android中的月份以奇怪的格式显示
- python - 如何解决 TypeError: __init__() missing 1 required positional argument 错误
- angular - 请求有效负载中的逗号导致来自角度的 POST 请求出错
- c++ - 弹跳球的正确算法