我是这类事情的新手，我确实有几个问题。希望你能指出我正确的方向，因为我已经为此失去了很多头发...... :-)
网址： 点击这里
我的问题：1）如何定义确切的“视图”（屏幕的一部分-具体的电视屏幕），例如。动画只会在屏幕的那部分可见？例如，链接应该只从特定位置到特定位置可见，我认为这可以解决我过早执行动画的问题。也许有人可以指出我正确的方向？
我已经为滚动动画实现了 superscrollorama。
2）当反向滚动时，即使“reverse”属性明确设置为true，它也不会做任何事情。为什么？
3）在 Firefox 中，一切似乎都正常，但在 Chrome 中，动画看起来甚至在 div 出现之前就已经完成了。为什么？我怎样才能解决这个问题？IE中也一样...
4）我想将 id 为“spin-it”的 div 旋转到第一个/左金色框架中，我如何指定确切的右滚动位置，以便它从 & 滚动到正确的位置？
也许这些动画最好不使用 Superscrollorama 来完成？
知道我的屏幕分辨率是 1366*768 也很方便。一旦一切正常运行，我计划修复/检查其他解决方案。
提前致谢！！亲切的问候
编辑：test.html
<body>
<script>
$(document).ready(function(){
$('#film').show(3000);
//Superscroll
var controller = $.superscrollorama({
triggerAtCenter: false,
playoutAnimations: true,
reverse: true,
});
if($("#film:visible")){
controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), 5, {css:{opacity: 0}}));
controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), 10, {css:{left:'500px'}, ease:Quad.easeInOut}));
controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut}));
}
});
</script>
<div class="container"></div>
<div class="content" style="background-color:#000000">
<img id="film" src="img/totaalaf_klein.jpg"/>
</div>
<div class="link1" id="fade-it">
<a href = "http://www.google.be">TEST LINK</a>
</div>
<div class="wieFlp" id="fly-it">
<div class="textkader" >
<p class="bigtext">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
</p>
</div>
</div>
<div class="test" id="spin-it">
<img src="img/testing.png"/>
</div>
</body>
</html>
出于某种原因，代码没有显示，但在那里它是对 JQuery 插件和 Superscrollorama 等的引用。
样式.css
html, body, div, span, applet, object, iframe,
h1，h2，h3，h4，h5，h6，p，blockquote，pre，
a，缩写，首字母缩写词，地址，大，引用，代码，
del，dfn，em，img，ins，kbd，q，s，samp，
小，罢工，强，子，sup，tt，var，
b, 你, 我, 中心,
dl, dt, dd, ol, ul, li,
字段集、表单、标签、图例、
表，标题，tbody，tfoot，thead，tr，th，td，
文章，放在一边，画布，细节，嵌入，
图, figcaption, 页脚, 页眉, hgroup,
菜单、导航、输出、红宝石、部分、摘要、
时间、标记、音频、视频{
边距：0；
填充：0；
边框：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
}
/* 旧浏览器的 HTML5 显示角色重置 */
文章, 除了, 细节, figcaption, 图,
页脚，页眉，hgroup，菜单，导航，部分{
显示：块；
}
身体 {
行高：1；
}
哦，你{
列表样式：无；
}
块引用，q {
报价：无；
}
块引用：之前，块引用：之后，
q:之前，q:之后{
内容： '';
内容：无；
}
桌子 {
边框折叠：折叠；
边框间距：0；
}
正文 {字体系列：无衬线；}
＃电影{
显示：无；
}
。内容 {
边框：2px 纯红色；
位置：绝对；
左：130px；
顶部：50px；
宽度：150px；
padding-right: 10px;
左边距：10px；
背景颜色：#000000；
z指数：2；
宽度：900px；
/*高度：596px；*/高度：3000px；
}
.link1{
位置：绝对；
填充顶部：45%；
左填充：20%；
z 指数：4；
}
。容器{
位置：固定；
高度：100%；
宽度：100%；
背景：url（'../img/bgtest2.png'）无重复中心中心固定；
背景尺寸：封面；
-webkit-background-size：封面；
z指数：3；
}
。下 {
位置：固定；
z 指数：4；
不透明度：0.5；
}
.textkader{
宽度：200px；
背景：url('../img/classy_fabric.png');
白颜色;
字体大小：12px；
font-family: 'Happy Monkey'，草书；
文字阴影：
1px 1px 0 透明,
2px 2px 0 #101010;
溢出：隐藏；
填充：15px；
}
.bigtext{
字体大小：15px；
字体粗细：粗体；
}
.wieFlp{
位置：绝对；
填充顶部：110%；
//padding-left: 18.5%;
右：867px；
/*z-index: 2;*/
z-索引：2；
}