-4

誰かが私に助けをくれることを願っています。#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>
4

1 に答える 1

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);
于 2012-12-25T02:05:44.357 に答える