【问题标题】:scrollmagic not responding to the trigger elementscrollmagic 没有响应触发元素
【发布时间】:2016-05-23 18:34:54
【问题描述】:

我在使用 ScrollMagic 时遇到问题。它在触发元素上根本没有响应。下面我将提供代码:

CSS:

.container {
    height: 3000px;
}

#trigger {
    position: relative;
    top: 300px;
}

.katrori {
    opacity: 0; 
    position:relative; 
    top:300px; 
    background-color:#eee; 
    height:400px; 
    padding:25px; 
    font-family:Arial, Sans-serif;
    font-weight:bold;
}

和 JS:

$(document).ready(function($)) {
    var controller = new ScrollMagic();
    var tween = TweenMax.to(".katrori", 0.5, {opacity: 1, backgroundColor: "#1d1d1d"})
    var scene = new ScrollScene({triggerElement: "#trigger"})
    .setTween(tween)
    .addTo(controller);
});

我错过了什么?

【问题讨论】:

标签: javascript jquery scrollmagic gasp


【解决方案1】:

你的JS主要有两个错误。

  1. 你的parenthesis (")") 太多了。

    $(document).ready(function($)) {
                                ^^ --> one of those
    
  2. 您正在使用 ScrollMagic 版本 >=2(您应该这样做),但使用版本 1 中的功能。这是 当前 版本的documentation

    现在初始化containerscene的正确方法是:

    var container = new ScrollMagic.Container({...});
    var scene = new ScrollMagic.Scene({...});
    

当您应用这些更改时,您的code 的工作示例可能类似于this

$(document).ready(function ($) {
    var controller = new ScrollMagic.Controller(),
        tween = TweenMax.to(".katrori", 0.5, {opacity: 1, backgroundColor: "#1d1d1d"}),
        scene = new ScrollMagic.Scene({triggerElement: "#trigger"});

    scene
        .setTween(tween)
        .addTo(controller);
});

您可能还想看看他们的examples

编辑

补充要点2:

ScrollMagic 版本 1 中,containerscene脚本中以这种方式初始化:

var controller = new ScrollMagic({ *global options applying to all scenes added*});
var scene = new ScrollScene({ *options for the scene* })

2 版本中以这种方式完成相同的操作:

var container = new ScrollMagic.Container({...});
var scene = new ScrollMagic.Scene({...});

这就是为什么您的脚本以前不起作用的原因。 styling 仍然在 CSS 中完成。

【讨论】:

  • thanx a lot man :) 这对我帮助很大,尽管我必须添加持续时间和偏移量才能使其正常工作。那么你上面提到的容器呢?我不太明白。我通过 css 为容器设置样式。我是否也必须在 JS 文件上对其进行初始化?
  • 是的,很好。也感谢编辑。我不知道有 2 个版本的 scrollmagic。我只是在互联网上偶然发现了不同的例子,很明显我把它弄混了:P 现在我知道第二个版本,所以这对我有很大帮助。再次感谢;)也许我在处理这个问题时还有其他问题......
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-03-26
  • 1970-01-01
  • 2022-12-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-12-12
相关资源
最近更新 更多