0

私はここでもまったくの初心者です-私はhttp://johnpolacek.github.com/superscrollorama/を使おうとしています。ご想像のとおり、私にとってのjavaスクリプトのアイデアは、特にこの「トゥイーン」のことで非常に圧倒されます。

とにかく、スクロールアニメーションの単語スプラッシュページを作成しようとしていて、同じトゥイーンを2回使用したかったので、FAQなどを見てみましたが、それでもまだ理解できないほど進んでいます（gah！） 「フェード-それ」は2回ですが、それは機能しません。また、下部に別の「fade-it」スクリプトを追加することもありません。明らかに私はここで何かが欠けています。誰かが私がおそらく修正するのが簡単な問題であると思うことを助けたいですか？;）

<div id="raychulllogo">
    <h2 id="fade-it">I'M <br> <img src="images/raychulllogoDARK.png" > </h2>
</div>

<h2 id="spin-it"></h2>
<p id="med">AND I </p>
<h2 id="smush-it">PHOTOGRAPH,</h2>
<h2 id="scale-it">DESIGN</h2>
<h2 id="fade-it"> &amp; FILM </h2>

JavaScriptは次のとおりです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
<script>window.jQuery || document.write('<script src="_/js/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/jquery.superscrollorama.js"></script>
<script>
    $(document).ready(function() {
        var controller = $.superscrollorama();
        // individual element tween examples
        controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}}));
        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}));
        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}), 0, 100); // 100 px offset for better timing
    });
</script>
4

3 に答える 3

0

ID の代わりにクラスに切り替えるのと同じくらい簡単かもしれません (複数の同一の ID を持つことはできません)。したがって、次のように変更します。

  <div id="raychulllogo">
    <h2 class="fade-it">I'M <br> <img src="images/raychulllogoDARK.png" > </h2>
   </div>
    <h2 class="spin-it"></h2>
    <p class="med">AND I </p>
    <h2 class="smush-it">PHOTOGRAPH,</h2>
    <h2 class="scale-it">DESIGN</h2>
    <h2 class="fade-it"> &amp; FILM </h2>
</div>

と

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
<script>window.jQuery || document.write('<script src="_/js/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/jquery.superscrollorama.js"></script>
<script>
    $(document).ready(function() {
        var controller = $.superscrollorama();
        // individual element tween examples
        controller.addTween('.fade-it', TweenMax.from( $('.fade-it'), .5, {css:{opacity: 0}}));
        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}));
        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}), 0, 100); // 100 px offset for better timing
    });
</script>

明確に<h2 id="fade-it">するために、 etc に変更し、<h2 class="fade-it">etc に変更$('#fade-it')します。$('.fade-it')

于 2013-03-21T18:13:14.090 に答える
0

私は同じことを試みていましたが、.class は機能しませんでしたが、それを機能させる方法を見つけました: アニメートしたいものごとに異なるクラスを作成します。

class="fade-it1" class="fade-it2" class="fade-it3"

次のような同じコントローラーを追加します。

controller.addTween('.fade-it', TweenMax.from( $('.fade-it'), .5, {css:{opacity: 0}}));
controller.addTween('.fade-it2', TweenMax.from( $('.fade-it2'), .5, {css:{opacity: 0}}));
controller.addTween('.fade-it3', TweenMax.from( $('.fade-it3'), .5, {css:{opacity: 0}}));

私はそれを試してみましたが、うまくいきました！

于 2013-06-17T14:03:38.927 に答える