![](/img/trans.png)
[英]Laravel Mix: Uncaught ReferenceError: ScrollMagic is not defined
[英]ScrollMagic - Uncaught ReferenceError: ScrollScene is not defined
为什么最新版本的ScrollMagic在下面给我这个错误?
未捕获的 ReferenceError:未定义 ScrollScene
这是我遵循本指南的测试代码:
$(function() {
// Init Controller
var scrollMagicController = new ScrollMagic();
// Create Animation for 0.5s
var tween = TweenMax.to('#animation', 0.5, {
backgroundColor: 'rgb(255, 39, 46)',
scale: 7,
rotation: 360
});
// Create the Scene and trigger when visible with ScrollMagic
var scene1 = new ScrollScene({
triggerElement: '#scene',
offset: 150 /* offset the trigger 150px below #scene's top */
})
.setTween(tween)
.addTo(scrollMagicController);
// Add debug indicators fixed on right side
scene1.addIndicators();
});
如果我使用的是这个最新版本:
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
完整的错误:
Uncaught ReferenceError: ScrollScene is not defined
at HTMLDocument.<anonymous> (basic.php:66)
at c (jquery.min.js:3)
at Object.fireWith [as resolveWith] (jquery.min.js:3)
at Function.ready (jquery.min.js:3)
at HTMLDocument.H (jquery.min.js:3)
但是如果我使用这个版本(我猜是旧的)并且它工作正常:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/1.3.0/jquery.scrollmagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/1.3.0/jquery.scrollmagic.debug.js"></script>
我的 HTML:
<div class="post">
<span class="glyphicon glyphicon-grain"> </span>
<h2> Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h2>
</div>
<div class="post" id="scene">
<span class="glyphicon glyphicon-lamp" id="animation"> </span>
<h2> Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h2>
</div>
任何想法为什么?
编辑:
如果我使用github 中的本指南:
// Init Controller
var scrollMagicController = new ScrollMagic.Controller();
// Create Animation for 0.5s
var tween = TweenMax.to('#animation', 0.5, {
backgroundColor: 'rgb(255, 39, 46)',
scale: 7,
rotation: 360
});
// Create the Scene and trigger when visible with ScrollMagic
var scene1 = new ScrollMagic.Scene({
triggerElement: '#scene',
offset: 150 /* offset the trigger 150px below #scene's top */
})janpaepke-ScrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min.js
.setTween(tween)
.addTo(scrollMagicController);
// Add debug indicators fixed on right side
scene1.addIndicators();
我会收到这个错误:
Uncaught TypeError: (intermediate value).setTween is not a function
at HTMLDocument.<anonymous> (basic.php:70)
at c (jquery.min.js:3)
at Object.fireWith [as resolveWith] (jquery.min.js:3)
at Function.ready (jquery.min.js:3)
at HTMLDocument.H (jquery.min.js:3)
为什么????? 他们拥有的文档太糟糕了!
编辑2:
所以我使用下载的版本:
<script src="libs/janpaepke-ScrollMagic/js/lib/greensock/TweenMax.min.js"></script>
<script src="libs/janpaepke-ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js"></script>
<!-- should be replaced with minified version when development is finished -->
<script src="libs/janpaepke-ScrollMagic/scrollmagic/minified/plugins/jquery.ScrollMagic.min.js"></script>
<!-- should be removed when development is finished -->
<script src="libs/janpaepke-ScrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min.js"></script>
我得到更多的错误:
jquery.ScrollMagic.min.js:2 Uncaught TypeError: Cannot read property '_util' of undefined
at jquery.ScrollMagic.min.js:2
at jquery.ScrollMagic.min.js:2
at jquery.ScrollMagic.min.js:2
(anonymous) @ jquery.ScrollMagic.min.js:2
(anonymous) @ jquery.ScrollMagic.min.js:2
(anonymous) @ jquery.ScrollMagic.min.js:2
debug.addIndicators.min.js:2 Uncaught TypeError: Cannot read property '_util' of undefined
at debug.addIndicators.min.js:2
at debug.addIndicators.min.js:2
at debug.addIndicators.min.js:2
(anonymous) @ debug.addIndicators.min.js:2
(anonymous) @ debug.addIndicators.min.js:2
(anonymous) @ debug.addIndicators.min.js:2
basic.php:65 Uncaught ReferenceError: ScrollMagic is not defined
at HTMLDocument.<anonymous> (basic.php:65)
at c (jquery.min.js:3)
at Object.fireWith [as resolveWith] (jquery.min.js:3)
at Function.ready (jquery.min.js:3)
at HTMLDocument.H (jquery.min.js:3)
文件名和文件夹结构完全是一团糟。 混乱和不一致!
尝试使用
new $.ScrollMagic.Scene
代替
new ScrollMagic.Scene
它应该有所帮助。 如果您使用的是1.3.0版本,则无需使用“$”。
您也必须导入gsap插件。 检查scrollmagic文件夹。 animation.gsap.min.js
解决了
我遇到了同样的错误,我发现它归结为 CDN 的放置。
最初我的 ScrollMagic CDN 位于底部,当我移动它时(如下所示),它解决了我的问题,所有控制台错误都消失了。
我的 ScrollMagic CDN 位于顶部,GSAP CDN 位于下方,
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/ScrollTrigger.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> <script type="module" src="./script.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.