设置ScrollMagic插件
设置ScrollMagic插件
提问于 2016-06-09 20:15:15
我目前正在学习JavaScript和jQuery，并想开始使用ScrollMagic插件。
不幸的是，我被困在了第一个障碍上--我花了几个小时在这上面，看了网上的各种教程，但我就是不能让这个插件工作！？
你能告诉我我哪里做错了吗？
首先要感谢大家！
$(document).ready(function() {
// Init ScrollMagic
var controller = new ScrollMagic.Controller();
// Scene 1 - pin the second section
var pinScene01 = new ScrollMagic.Scene({
triggerElement: '#nav',
triggerHook: 0,
duration: '100%'
})
.setPin('#nav .nav1')
.addTo(controller);
});.nav1 {
height: 20vh;
background-color: #090;
position: relative;
overflow: hidden;
}
.div1 {
height: 80vh;
background-color: #F33;
position: relative;
overflow: hidden;
}
.div2 {
height: 100vh;
background-color: #FCC;
position: relative;
overflow: hidden;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="div1">Div one content!</div>
<div class="nav1" id="#nav">Nav bar div</div>
<div class="div2">And more content...</div>
<div class="div1">And a repeat!</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
</body>
</html>
回答 2
Stack Overflow用户
发布于 2016-06-10 17:41:58
我在您的文件中没有看到任何对JavaScript代码的引用。
在所有其他JS文件下包含一个指向它的链接，它应该可以工作。
Stack Overflow用户
发布于 2018-02-22 16:32:33
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="div1">Div one content!</div>
<div class="nav1" id="nav">Nav bar div</div>
<div class="div2">And more content...</div>
<div class="div1">And a repeat!</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<style>
body{margin: 0; padding: 0;}
.nav1 {height: 40px;background-color: #090;position: relative;float: left; width: 100%;}
.div1 {height:1000px;background-color: #F33;position: relative;float: left; width: 100%;}
.div2 {height: 1000px;background-color: #FCC;position: relative;float: left; width: 100%;}
</style>
<script>
$(document).ready(function(){
var controller = new ScrollMagic.Controller();
var pinScene01 = new ScrollMagic.Scene({
triggerElement: '#nav',
triggerHook: 0
})
.setPin('#nav', {pushFollowers: false})
.addIndicators({
color: '#f00',
name: 'nav'
})
.addTo(controller);
});
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37725758
复制相关文章
相似问题
腾讯云开发者
