Javascript 如何定义屏幕的确切可见部分+;滚动动画

Javascript 如何定义屏幕的确切可见部分+;滚动动画,javascript,jquery,html,css,scroll,Javascript,Jquery,Html,Css,Scroll,我对这类事情还不熟悉,我确实有一些问题。 希望你能给我指出正确的方向,因为我已经为此失去了很多头发…:-) 网址: 我的问题: 1) 如何定义精确的“视图”(屏幕的一部分,具体为电视屏幕),以便动画仅在屏幕的该部分可见? 例如,链接应仅从特定位置到特定位置可见 我认为这将解决我在动画过早执行时遇到的问题。 也许有人能给我指出正确的方向 我已经为滚动动画实现了超级动画 2) 当反向滚动时,即使“reverse”属性显式设置为true,它也不会执行任何操作。为什么? 3) 在Firefox中,一切

我对这类事情还不熟悉,我确实有一些问题。 希望你能给我指出正确的方向,因为我已经为此失去了很多头发…:-)

网址:

我的问题: 1) 如何定义精确的“视图”(屏幕的一部分,具体为电视屏幕),以便动画仅在屏幕的该部分可见? 例如,链接应仅从特定位置到特定位置可见 我认为这将解决我在动画过早执行时遇到的问题。 也许有人能给我指出正确的方向

我已经为滚动动画实现了超级动画

2) 当反向滚动时,即使“reverse”属性显式设置为true,它也不会执行任何操作。为什么?

3) 在Firefox中,一切似乎都正常,但在Chrome中,动画似乎在div出现之前就完成了。为什么?我怎样才能解决这个问题? 在IE中也是一样的

4) 我想将id为“spin it”的div旋转到第一个/左黄金帧中,如何指定准确的右滚动位置,使其从&滚动到准确的右位置

也许这些动画最好不用超级动画

知道我的屏幕分辨率是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>

$(文档).ready(函数(){
元("电影").show(3000元);;
//超级卷
变量控制器=$.superscrolama({
triggerAtCenter:false,
playoutAnimations:没错,
相反:是的,
});
如果($(“#胶片:可见”)){
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});
}
});

Lorem ipsum dolor sit amet,是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中,因怀孕而死亡的蒙特斯,因饥饿而死亡的蒙特斯,因饥饿而死亡的蒙特斯,因饥饿而死亡的蒙特斯,因饥饿而死亡的蒙特斯,因饥饿而死亡的蒙特斯,因饥饿而死亡的蒙特斯,因饥饿而死亡的蒙特斯,因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。这是一个很好的例子。Donec pede justo、fringilla vel、aliquet nec、vulputate eget、arcu。在埃尼姆·胡斯托、朗卡斯·乌特、伊佩拉、维尼那提斯·维塔、胡斯托。猫咪的口头禅是一种很好的口头禅。整数tincidunt。克拉斯·达皮布斯。万岁。埃尼安·沃普塔特·埃利芬德·泰勒斯。埃尼安·利古拉、波特提托·欧盟、康塞卡特·维泰、埃利芬德·ac、埃尼姆。阿利奎姆·勒姆·安特、达比布斯·安特、维韦拉·奎斯、费吉亚·阿泰勒斯。

出于某种原因,代码没有显示,但在那里它引用了JQuery插件和超级脚本等等

Style.css

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } body {font-family: sans-serif;} #film{ display:none; } .content { border: 2px solid red; position: absolute; left: 130px; top: 50px; width: 150px; padding-right: 10px; padding-left: 10px; background-color: #000000; z-index: 2; width: 900px; /*height: 596px;*/height: 3000px; } .link1{ position: absolute; padding-top: 45%; padding-left: 20%; z-index: 4; } .container{ position: fixed; height: 100%; width: 100%; background: url('../img/bgtest2.png') no-repeat center center fixed; background-size: cover; -webkit-background-size: cover; z-index: 3; } .down { position: fixed; z-index: 4; opacity: 0.5; } .textkader{ width: 200px; background: url('../img/classy_fabric.png'); color: white; font-size: 12px; font-family: 'Happy Monkey', cursive; text-shadow: 1px 1px 0 transparent, 2px 2px 0 #101010; overflow: hidden; padding: 15px; } .bigtext{ font-size: 15px; font-weight: bold; } .wieFlp{ position: absolute; padding-top: 110%; //padding-left: 18.5%; right: 867px; /*z-index: 2;*/ z-index:2; } html、正文、div、span、小程序、对象、iframe、, h1、h2、h3、h4、h5、h6、p、块报价、预, a、 缩写,首字母缩写,地址,大,引用,代码, del、dfn、em、img、ins、kbd、q、s、samp、, 小、走向、强、次、辅助、tt、var、, b、 u,i,中心, dl,dt,dd,ol,ul,li, 字段集、表单、标签、图例、, 表格、标题、正文、tfoot、THAD、tr、th、td、, 文章、旁白、画布、细节、嵌入、, 图,figcaption,页脚,页眉,H组, 菜单、导航、输出、ruby、节、摘要、, 时间、标记、音频、视频{ 保证金:0; 填充:0; 边界:0; 字体大小:100%; 字体:继承; 垂直对齐:基线; } /*旧浏览器的HTML5显示角色重置*/ 文章,旁白,细节,图表, 页脚、页眉、H组、菜单、导航、节{ 显示:块; } 身体{ 线高:1; } ol,ul{ 列表样式:无; } 区块报价,q{ 报价:无; } blockquote:before,blockquote:after, 问:之前,问:之后{ 内容:''; 内容:无; } 桌子{ 边界塌陷:塌陷; 边界间距:0; } 正文{字体系列:无衬线;} #胶卷{ 显示:无; } .内容{ 边框:2倍纯红; 位置:绝对位置; 左:130像素; 顶部:50px; 宽度:150px; 右边填充:10px; 左侧填充:10px; 背景色:#000000; z指数:2; 宽度:900px; /*高度:596px;*/高度:3000px; } .link1{ 位置:绝对位置; 填充顶部:45%; 左:20%; z指数:4; } .集装箱{ 位置:固定; 身高:100%; 宽度:100%; 背景:url('../img/bgtest2.png')没有固定的重复中心; 背景尺寸:封面; -webkit背景尺寸:封面; z指数:3; } .下来{ 位置:固定; z指数:4; 不透明度:0.5; } 特克斯卡德先生{ 宽度:200px; 背景:url('../img/classy_fabric.png'); 颜色:白色; 字体大小:12px; 字体家族:“快乐猴子”,草书; 文本阴影: 1px 1px 0透明, 2×2×0#101010; 溢出:隐藏; 填充:15px; } .bigtext{ 字体大小:15px; 字体大小:粗体; } 维夫普先生{ 位置:绝对位置; 垫面:110%; //左:18.5%; 右:867px; /*z指数:2*/ z指数:2; }
你能包括一些代码吗?你是使用文档准备还是窗口加载?Chrome在加载窗口之前为图像添加0个维度,这可能会搞乱任何计算高度的代码