Javascript 超级动画：反转动画

这是我的第一篇文章，但我是一个长期的观众。希望有人能帮上忙——这件事让我抓狂，我试了又试，想找到答案，但没用

基本上，我正在用一些风格的滚动元素更新朋友的网站。我选择了超级画卷，因为它看起来非常棒，尽管我已经准备好接受它对于我所要实现的目标来说是完全过火了。无论如何，我对超级动画非常感兴趣，所以我想我选择它的部分原因是为了尝试使用它

无论如何，我试图实现的想法包括：

单页网站，其中第一节仅是一个居中的大（650px宽）图像和一个导航菜单，位于包含6个元素的页面顶部

向下滚动时，我希望图像缩小到250px的宽度，并且我希望在第三个和第四个

之间留出250px的空间，以便缩小后的图像滚动并在滚动期间保持不变。我试图通过在第三个

右边添加一个边距来创建空间。（我很感激这可能会给我带来不良的副作用，其中之一是它不会完全集中。这里也欢迎你提出建议！不过，我将要描述的问题是，我在尝试基于浮动和使用两个单独div的其他方法时也遇到过，因此右边距本身似乎不是根本原因）

现在，我已经设法使图像收缩并将其自身附加到页面顶部，而没有太多麻烦

我遇到的问题是右边的边距。在页面加载时，

显示为居中且均匀分布，正如我所希望的那样。第三个

上的右边距值为0。但是，在最微小的滚动事件之后，该值从0跳到89px。继续滚动可以根据需要工作，但在向后滚动时，边距返回到89px，然后停止

以下是我得到的代码：

HTML:

而JS：

<script>
    $(document).ready(function() {
        var controller = $.superscrollorama({
        reverse: true
    });
        var windowHeight=window.innerHeight;
        var scrollDuration = windowHeight; 

        controller.addTween('#grow_margin', 
            TweenMax.to( $('#grow_margin'), .25, {css:{'margin-right':'250px'}, immediateRender:true}), scrollDuration);
        controller.addTween('#scale-it', 
            TweenMax.fromTo( $('#scale-it'), .25, {css:{width:'650px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{width:'250px'}, ease:Quad.easeInOut}), 
            scrollDuration);
        controller.addTween('#fix-it', 
            TweenMax.fromTo( $('#fix-it'), .25, {css:{top:'40%'}, immediateRender:true, ease:Quad.easeInOut}, {css:{top:'4'}, ease:Quad.easeInOut}), 
            scrollDuration);    
    });

</script>

$（文档）.ready（函数（）{
变量控制器=$.superscrolama({
相反：正确
});
var windowHeight=window.innerHeight；
var scrollDuration=窗口高度；
controller.addTween（'grow#u margin'，
TweenMax.to（$（'grow#u margin'），.25，{css:{'margin-right'：'250px'}，immediater:true}），scrollDuration）；
controller.addTween（“#缩放它”，
TweenMax.fromTo（$（'#scale it'），.25，{css:{width:'650px'}，immediater:true，ease:Quad.easeInOut}，{css:{width:'250px'}，ease:Quad.easeInOut}），
（持续时间）；
controller.addTween（“#修复它”，
TweenMax.fromTo（$（'fix'），.25，{css:{top:'40%}，immediater:true，ease:Quad.easeInOut}，{css:{top:'4'}，ease:Quad.easeInOut}），
（持续时间）；
});

任何帮助都将不胜感激！这简直快把我逼疯了

谢谢大家!

---

Rob

在JSFIDLE上：如您所见，它开始时完全居中。然后，一旦开始滚动，边距就会跳到一个随机值。从那里向下滚动可以按预期的方式工作，但在向上滚动时，边距只会返回到它最初跳转到的随机值。在中，不是0。对，整个上午都在JSFIDLE中玩。如果我去掉它的上标，在5秒钟内使用一个普通的tween，边距会像预期的那样逐渐增加。CSS似乎也没有问题。我已经尝试删除所有的边距、位置等，但问题始终存在。我认为这和超级全景和TweenMax之间的互动有关。我已经一次又一次地阅读了文档，虽然我承认这可能超出了我的理解范围，但我看不出为什么我得到的东西不起作用。

html {
height: 100%;
width: 100%;
}

body {
    height: 100%;
    width: 100%;
}

nav {
position: fixed;
top: 0;
width: 100%;
height: 5%;
text-align: center;
}



nav ul {
list-style: none;
height: 100%;
}

nav ul li {
display: inline-block;
height: 100%;
}

nav ul li a {
color:#bbbbbb;
text-decoration: none;
margin: 8px;
}

header {
width: 100%;
position: fixed;
}

header h1 {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
}

<script>
    $(document).ready(function() {
        var controller = $.superscrollorama({
        reverse: true
    });
        var windowHeight=window.innerHeight;
        var scrollDuration = windowHeight; 

        controller.addTween('#grow_margin', 
            TweenMax.to( $('#grow_margin'), .25, {css:{'margin-right':'250px'}, immediateRender:true}), scrollDuration);
        controller.addTween('#scale-it', 
            TweenMax.fromTo( $('#scale-it'), .25, {css:{width:'650px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{width:'250px'}, ease:Quad.easeInOut}), 
            scrollDuration);
        controller.addTween('#fix-it', 
            TweenMax.fromTo( $('#fix-it'), .25, {css:{top:'40%'}, immediateRender:true, ease:Quad.easeInOut}, {css:{top:'4'}, ease:Quad.easeInOut}), 
            scrollDuration);    
    });

</script>