标签: scrollmagic

我正在尝试使用ScrollMagic构建站点，但我遇到一个问题：我将reverse选项定义为false，并且在特定场景下似乎无法覆盖此选项。

我有几个场景，只需要一个或两个场景即可制作反向动画。全局设置反向选项false并为特定场景设置反向动画会容易得多。

这是我的代码：

var controller;
$(document).ready(function($) {
    controller = new ScrollMagic({
        globalSceneOptions: {
            reverse: false
        }
    });
});

。。。

$(document).ready(function($) {
    var tween = TweenMax.from("#works_macbook_top", 1, 
        { rotationX: -80, ease: Sine.easeOut }
    );
    var scene = new ScrollScene({triggerElement: ".works .graphic", duration: 250, offset: -100, reverse: true})
                    .setTween(tween)
                    .addTo(controller);
    scene.addIndicators();
});

动画不会向后播放，因此相反：场景中设置的true属性似乎不会取代全局设置。

有可能做到这一点吗？希望你能帮我！谢谢！

这是我网站的粗略结构:

<header>
<section1>
<section2>
<section3>
<footer>

我正在使用ScrollMagic场景来固定标题,直到section2到达窗口的顶部.
为此,我将场景的持续时间设置为标题的高度+ section1高度.

问题是ScrollMagic在我的标题周围创建了一个div元素,其填充底部恰好是该持续时间.
但我不想填充.我希望标题位于section1的顶部,一旦我开始滚动就好像它已被修复 - 但直到我到达第2节.此时第2节到达窗口的顶部(减去标题我希望场景结束并滚动标题.

事实上,当我将持续时间设置为0时,一切都能正常工作.但很明显,这也让我的标题始终保持在那里,一旦到达section2就不会消失.

我希望这是可以理解的.

这是我的代码:

var controller = new ScrollMagic.Controller();

var headerscroll = $("#header").height() + $("#section1").height() ;

var headerScene = new ScrollMagic.Scene({
  pushFollowers: false,
  duration: headerscroll,
  offset: 30
})
.setPin("#header");

controller.addScene([
  headerScene
]);

我正在尝试使用ScrollMagic的这个特定动画

http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sections.html

但是正确加载文件非常困难.我试图包括ScrollMagic,GSAP和GreenSock,但不知何故,ScrollMagic要求我先前加载GASP并且GSAP说主模块丢失并要求我自己加载ScrollMagic.我正在使用jQuery做异步,如下所示

$.getScript( "http://localhost/icons/gsap.js", function( data, textStatus, jqxhr ) {
    $.getScript( "http://localhost/icons/scroll.js", function( data, textStatus, jqxhr ) {
        $.getScript( "http://localhost/icons/greensock.js", function( data, textStatus, jqxhr ) {
          //whatever
        });
    });
});

当gsap是第一个时,它会记录以下错误:

错误:找不到ScrollMagic主模块.请确保在此插件之前加载它或使用像requirejs ERROR的异步加载器:找不到TweenLite或TweenMax.请确保在ScrollMagic之前加载GSAP或使用像requirejs这样的异步加载器.

这是当在加油之前加载scrollmagic时

错误:找不到TweenLite或TweenMax.请确保在ScrollMagic之前加载GSAP或使用像requirejs这样的异步加载器.

以前有没有人有同样的问题？你有一个可行的例子来展示吗？如何修复此加载问题并使示例正常工作？

我想知道当你向下滚动时向前播放动画的方式,向上滚动时没有动画.

var controller = new ScrollMagic.Controller();

var tween_1 = TweenMax.to('#obj_1', 0.5, {
    left: '0%', delay: .1
});

var containerScene = new ScrollMagic.Scene({
    triggerElement: '#scene_1',
    offset: -100
})
.setTween(tween_1)
.addIndicators()
.addTo(controller);

当用户向下滚动页面时，我想隐藏我的站点标题（在 ScrollMagic 中很容易做到） - 但我不确定我是否也可以使用 ScrollMagic 来检测用户是否正在向上滚动，如果是这样再次显示标题。

棘手的部分是，对于初始向下滚动，我可以为主站点包装器设置一个简单的偏移量，但是对于在页面滚动过程中任何时候都可能发生的 scollup，我不确定如何使用 ScrollMagic 的事件来实现这一点？

任何帮助表示赞赏。

担

我要做的就是在第一次滚动到视图时将一个类添加到div中，然后将其保留在该位置。（因此，我不想切换它-只需触发一次）。我有一个基于将类添加到父div的动画，即使我指定了方向，当我在检查器中检查它时，它仍会在反向滚动中删除该类。我不希望动画每次滚动时都运行，而只希望第一次运行（然后停留在完成动画状态）。

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
triggerElement: '#intro',
offset: 50
})
.on("start", function(e) { 
    if (e.scrollDirection === "FORWARD") {
        $('#welcome').addClass('animated');}
    })
.addTo(controller);

我确实尝试添加持续时间，但是没有效果。有什么建议么？

我正在尝试在我的 Nuxt 项目中添加 ScollMagic，我遵循了这篇文章：https ://nuxtjs.org/guide/plugins & 我在 nuxt.config.js 中添加了 ScrollMagic.js 并且我遇到了这个问题：ReferenceError window is没有定义的。

module.exports = {
 plugins: [
    { src: '~plugins/ScrollMagic', mode: 'client' }
  ],
}

Then I've added this snippet in my component:
import ScrollMagic from 'scrollmagic'

我还是有这个问题...

即使像这样覆盖它：

if (process.client) {
  Vue.use(ScrollMagic)
}

我想在nuxtjs中使用scrollmagic。

我通过npm安装了scrollmagic。

npm install scrollmagic

在我的nuxt.config.js文件中添加了

build: {
    vendor: ['scrollmagic']
},

在我的pages / index.vue文件中，我只是将其导入。

import ScrollMagic from 'scrollmagic'

但这只会导致此错误

[vue-router]无法解析异步组件默认值：ReferenceError：未定义窗口[vue-router]在路径导航期间未捕获的错误：ReferenceError：未在C：\ pathto \ node_modules \ scrollmagic \ scrollmagic \ uncompressed \ ScrollMagic定义窗口.js：37：2，位于C：\ pathto \ node_modules \ scrollmagic \ scrollmagic \ uncompressed \ ScrollMagic.js：22：20，位于Object。（C：\ pathto \ node_modules \ scrollmagic \ scrollmagic \ uncompressed \ ScrollMagic.js：27：2）

我怎样才能解决这个问题？

我正在尝试实现第一个示例中的代码:

http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_scrolling.html

以下补间工作(但立即补间)...

var tween = new TimelineMax().add([
        TweenMax.to('#test',1,{top:"50%",ease:Linear.easeNone})
    ]);

当我添加以下代码时......

var scene = new ScrollMagic.Scene({
    triggerElement:'#test' ,
    duration:500
})
    .setTween(tween)
    .addTo(controller);

我得到以下错误:

Uncaught TypeError: (intermediate value).setTween is not a function

我疯了,试图解决这个问题.我究竟做错了什么？