Если вы ищете интересный эффект для вашего следующего проекта, то сегодняшняя подсказка должна вас заинтересовать. Мы собираемся посмотреть на индивидуально трансформируемые символы внутри предложения. В нашем примере кода jQuery используется для навигации по выбранному предложению и запуска анимации для каждой буквы. Тем не менее, все анимации выполняются с помощью CSS-анимации, а не самой JQuery.
Начиная
Для этого нам нужен jQuery. После сортировки jQuery мы можем добавить наши функции JavaScript в функцию document.ready() .
jQuery(document).ready(function() { // Further code to go in here });
Нам нужна только базовая разметка, чтобы это работало. Внутри нашего HTML-файла мы добавляем любой текст, который хотим, а затем добавляем класс .sentence за которым следует основная кнопка.
<h1 class="sentence title">Fancy Slide In Text</h1> <h3 class="sentence subtitle">Embrance the fanciness!</h3> <div class="button">Click to Animate</div>
Подготовка ваших предложений
Наш пример ищет все элементы, имеющие класс .sentence . Получив эти элементы, мы перебираем каждый символ их text значения и создаем нашу подстроку, извлекая по одному символу за раз из нашего предложения. Каждое предложение заключено в <span> чтобы позже его можно было анимировать индивидуально.
Мы также проверяем, является ли символ пустым (например, содержит ли он пробел, такой как " " ). Мы игнорируем их, так как нас интересует только анимация реальных персонажей.
Как только мы закончим со всеми символами, мы возвращаем наш новый контент обратно в наше предложение, заменяя наш стандартный простой текст символами, заключенными в теги <span> .
// Go through a sentence, wrap its characters with spans function setUpCharacters() { var $sentences = $('.sentence'); // Run for each sentence $sentences.each(function() { var $sentence = $(this); var newContent = ''; // Go through all characters of the sentence for (i = 0; i < $sentence.text().length; i++) { var substring = $sentence.text().substr(i, 1); // If we have a character, wrap it if (substring != " ") { newContent += '<span>' + substring + '</span>'; } else { newContent += substring; } } // Replace content $sentence.html(newContent); }); } setUpCharacters();
Запуск вашей анимации
Это забавная часть. Здесь мы перебираем все наши элементы .sentence и .sentence элементы <span> и активируем их. Эта функция фактически не выполняет никакой анимации, все, что она делает, это добавляет класс .active к элементам. Как только мы получим это активное состояние, мы сможем применить CSS-анимацию для выполнения любой фантазии, о которой мы мечтаем!
// Go through a sentence and trigger activate state function triggerCharacters() { var sentenceCounter = 0; var sentenceDelay = 600; $('.sentence').each(function() { var $sentence = $(this); // Trigger for each sentence setTimeout(function() { var $spans = $sentence.find('span'); var spanCounter = 0; var spanDelay = 75; // Loop through all spans and activate $spans.each(function() { var $span = $(this); // Trigger a timeout so each span is offset setTimeout(function() { $span.toggleClass('active'); }, (spanCounter * spanDelay)); spanCounter++; }); }, (sentenceCounter * sentenceDelay)); sentenceCounter++; }); } // For our example, trigger character animations on button click $('.button').on('click', function() { triggerCharacters(); });
Давайте разберемся, что именно здесь происходит:
- По нашему мнению, одно предложение будет постепенно исчезать после начальной задержки, чтобы придать шаткий вид. Мы будем устанавливать начальную задержку для каждого предложения в 600 мс. Это используется нашей внешней функцией
setTimeout(). - Мы находим и перебираем все элементы
.sentenceи.sentenceих дочерние<span>. Мы назначаем новую задержку, на этот раз для отдельных символов диапазона, когда они запускаются. Это позволит активировать каждый диапазон отдельно. - Внутренняя функция
setTimeout()сработает, выполняя каждый<span>мере необходимости. - В нашем примере мы хотим вызвать этот эффект, когда нажимаем кнопку. Для этого мы ищем наш элемент
.buttonи запускаем нашуtriggerCharacters()соответственно. Вы можете легко связать это с другим элементом или, когда страница загружается, решать только вам.
Сами анимации
Мы применяем базовые стили к каждому диапазону предложения, а затем применяем анимацию только тогда, когда у нас есть диапазон с классом .active .
.sentence span { opacity: 0; position: relative; display: inline-block; } .sentence span.active { animation: bounceUp 600ms ease 0ms 1 normal both; }
Здесь мы применяем причудливую CSS-анимацию к каждому <span> . То, что мы делаем, это переводим положение элемента вверх, вниз и затем, наконец, возвращаемся в исходное положение.
/* Bounce top in */ @keyframes bounceUp { 0% { transform: translate3d(0px, 0px, 0px); opacity: 0; } 50% { transform: translate3d(0px, -50px, 0px); opacity: 0.7; } 80% { transform: translate3d(0px, 20px, 0px); opacity: 1; } 100% { transform: translate3d(0px, 0px, 0px); opacity: 1; } }
Когда кнопка нажата, первое предложение будет активировано, и все его последующие элементы <span> будут анимированы. После небольшой задержки активируются и последующие элементы .sentence , и их .sentence элементы <span> будут следовать.
Наша анимация в действии
Вот CodePen, который демонстрирует, как вы можете заставить это работать. Не стесняйтесь взглянуть на него, чтобы создать свои собственные крутые эффекты и анимацию!
См. Раздел Анимация пера в строке символов с помощью SitePoint ( @SitePoint ) в CodePen .
Вопросы доступности
Поскольку мы эффективно разбиваем предложения на символы, есть вероятность, что программы чтения с экрана будут испытывать трудности при чтении полных слов. Чтобы прекратить это, мы можем сообщить читателям экрана, в каком исходном предложении использовался атрибут aria-label нашего элемента. Затем мы используем aria-hidden="true" в каждом из наших тегов <span> чтобы скрыть эти отдельные элементы от программ чтения с экрана. Таким образом, программы чтения с экрана все еще должны быть способны прочитать наше анимированное предложение и игнорировать наши отдельные элементы <span> .
Наша окончательная разметка после воздействия JavaScript будет выглядеть так:
<h1 class="sentence title" aria-label="Fancy Slide In Text"> <span class="active" aria-hidden="true">F</span> <span class="active" aria-hidden="true">a</span> <span class="active" aria-hidden="true">n</span> <span class="active" aria-hidden="true">c</span> <span class="active" aria-hidden="true">y</span> <span class="active" aria-hidden="true">S</span> <span class="active" aria-hidden="true">l</span> <span class="active" aria-hidden="true">i</span> <span class="active" aria-hidden="true">d</span> <span class="active" aria-hidden="true">e</span> <span class="active" aria-hidden="true">I</span> <span class="active" aria-hidden="true">n</span> <span class="active" aria-hidden="true">T</span> <span class="active" aria-hidden="true">e</span> <span class="active" aria-hidden="true">x</span> <span class="active" aria-hidden="true">t</span> </h1>