Question

我是这类事的新手，我确实有几个问题。希望你能指出我正确的方向，因为我已经失去了很多头发......： - ）

URL： Click here

我的问题： 1）如何定义精确的“视图”（屏幕的一部分 - 电视屏幕是特定的），以便例如。动画只会在屏幕的那一部分显示？例如，链接应仅从特定位置到特定位置可见我认为可以解决我过早执行动画的问题。也许有人可以指出我正确的方向？

我已经为滚动动画实现了superscrollorama。

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

3）在Firefox中，一切似乎都运行正常，但在Chrome中看起来动画即使在div进入视图之前也已完成。为什么？我怎样才能解决这个问题？在IE中也一样......

4）我想将带有id“spin-it”的div旋转到第一个/左边的金色框架中，如何指定确切的右滚动位置，以便它将从＆amp;到了正确的位置？

也许这些动画最好不使用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等。

的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;
    }

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

0 个答案: