Как использовать одну и ту же анимацию для нескольких слов, используя суперкролормаму?

Question

Я снова являюсь новичком здесь Я пытаюсь использовать http://johnpolacek.github.com/superscrollorama/, и, как вы можете себе представить, идея java-скрипта для меня очень подавляющая, особенно эта «tween» вещь.

В любом случае, я пытаюсь сделать прокручивающую анимационную страницу для всплесков слова, и я хотел использовать ту же двойку дважды, я пробовал смотреть на часто задаваемые вопросы и еще что-то, но даже они слишком продвинуты для меня, чтобы еще понять (gah!) я попробовал просто ввести «fade-it» дважды, но это не сработает. не добавляет еще один скрипт «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> 

Answer 1

Это может быть так же просто, как переход на классы, а не идентификаторы (вы не можете иметь несколько одинаковых идентификаторов). Поэтому изменить это:

<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"> изменения <h2 class="fade-it"> и т.д. и $('#fade-it') изменения $('.fade-it') и т.д.

Answer 2

я пытался то же самое и тому .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}})); 

Я попробовал и это сработало!

Answer 3

Пришло время найти ответ на ту же проблему. Кажется, что опция «# fly-it» также должна иметь некоторые изменения в файле css. Если вам требуется несколько «# fly-it» на одной и той же странице html, вам также необходимо добавить следующее в ваш файл css.

#fly-it { position: relative; } 
#fly-it2 { position: relative; } 
#fly-it3 { position: relative; } 
#fly-it4 { position: relative; }