Q&A
自己解決
回答ありがとうございます。
わかりづらい質問で申し訳ありません。
怪しげな線というのが、
Trigger等についているボーダーラインのことです。
デモページの右上あたりにあるかと思います。
私の環境では
<script type="text/javascript" src="js/debug.addIndicators.js"></script>
の記述を削除するとなぜか動作しなくなってしまいます。
簡単にソースを貼らせていただきます。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>SAMPLE SITE</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="js/animation.gsap.min.js" script type="text/javascript"></script>
<script src="js/animation.velocity.min.js" script type="text/javascript"></script>
<script src="js/debug.addIndicators.min.js" script type="text/javascript"></script>
<script src="js/jquery.scrollmagic.min.js" script type="text/javascript"></script>
<script src="js/lib/greensock/TweenMax.min.js" script type="text/javascript"></script>
<script type="text/javascript" src="js/smoothScroll.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="header">
<img src="images/header_img.jpg">
</div>
<div id="top">
<img src="images/top_img.jpg">
</div>
<ul id="menu">
<li><a href="#a">a</a></li>
<li><a href="#b">b</a></li>
<li><a href="#case">c</a></li>
</ul>
<div id="s_title">
</div>
<section class="panel">
<div id="a">
<img src="images/button.jpg" class="moreb">
</div></section>
<section class="panel">
<div id="b">
<img src="images/button.jpg" class="moreb">
</div></section>
<section class="panel">
<div id="c">
<p class="title">
TEXT</p>
<p class="text">
TEXT
<img src="images/button.jpg" class="more"></p>
</div></section>
</div>
<script>
$(function () { // wait for document ready
// init
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 'onLeave'
}
});
// get all slides
var slides = document.querySelectorAll("section.panel");
// create scene for every slide
for (var i=0; i<slides.length; i++) {
new ScrollMagic.Scene({
triggerElement: slides[i]
})
.setPin(slides[i])
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
}
});
</script>
</body>
</html>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。