Question

我希望有人可以给我一些帮助。为什么#slide标签没有滑入？当我在其中添加#sliding标签时，停止其余的superscrollorama标签工作。我错过了什么？我是javascript的新手所以任何帮助将不胜感激！这是我正在处理的网站的链接。 thesurrealstudio.com/new-site

谢谢！

    $(document).ready(function() {
        // This example adds a duration to the tweens so they are synced to the scroll position

        var controller = $.superscrollorama();

        // amount of scrolling over which the tween takes place (in pixels)
        var scrollDuration = 200; 

        // individual element tween examples

        controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}}), scrollDuration);
        controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut}), scrollDuration);
        controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut}), scrollDuration);
        controller.addTween('#scale-it', TweenMax.fromTo( $('#scale-it'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'240px'}, ease:Quad.easeInOut}), scrollDuration);
        controller.addTween('#smush-it', TweenMax.fromTo( $('#smush-it'), .25, {css:{opacity:0, 'letter-spacing':'30px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, 'letter-spacing':'-10px'}, ease:Quad.easeInOut}), scrollDuration); // 100 px offset for better timing
        controller.addTween('#slide', TweenMax.from( $('#slide'), .5, {css:{margin-left: 0}}), scrollDuration);

        // set duration, in pixels scrolled, for pinned element
            var pinDur = 4000;
            // create animation timeline for pinned element
            var pinAnimations = new TimelineLite();
            pinAnimations
                .append(TweenMax.from($('#pin-frame-pin h2'), .5, {css:{marginTop:0}, ease: Quad.easeInOut}))
                .append([
                    TweenMax.to($('#slide'), .5, {css:{marginLeft:0}}),
                    TweenMax.to($('#services/portfolio'), .5, {css:{marginLeft:'100%'}})
                ], .5)

    });

HTML

<div id="about/services" class="divider"></div>


        <!--start of services page  --> 
        <section id="slide" class="pin-frame">

            <div class="grid wfull">



                <div class="row">

                    <div class="c12">
                    <header>

                    </header>
                    </div>

                </div>

                  <div class="row">

                    <div class="c4">

                    </div>

                    <div class="c4 s4 end">

                    </div>


                </div>




                <div class="row">

                    <div class="c12">

                    </div>


                </div>


                <div class="row">

                    <div class="c12">
                    <footer>

                    </footer>
                    </div>
                </div>




            </div>


        </section>
        <!--end of services page   --> 



        <div id="services/portfolio" class="divider"></div>



        <!--start of portfolio page  --> 
        <section id="portfolio-page" class="section">

            <div class="grid wfull" class="section">



                <div class="row">

                    <div class="c12">
                    <header>

                    </header>
                    </div>

                </div>

                  <div class="row">

                    <div class="c4">

                    </div>

                    <div class="c4 s4 end">

                    </div>


                </div>




                <div class="row">

                    <div class="c12">

                    </div>


                </div>


                <div class="row">

                    <div class="c12">
                    <footer>

                    </footer>
                    </div>
                </div>

Answer 1

尝试从它的源代码加载jquery：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

你也有这条线：

controller.addTween('#slide', TweenMax.from( $('#slide'), .5, {css:{margin-left: 0}}), scrollDuration);

使用单个配额将margin-left更改为'margin-left'：

controller.addTween('#slide', TweenMax.from( $('#slide'), .5, {css:{'margin-left': 0}}), scrollDuration);

SuperScrollarama javascript滑动divs greensock

1 个答案: