Статьи

Создание эффекта вспыхивающего текста с помощью jQuery

Февраль 19, 2019

Иногда вам нужен хороший эффект, чтобы улучшить внешний вид вашего веб-сайта и привлечь внимание посетителей. Существует множество бесплатных и готовых к использованию плагинов, которые могут улучшить стиль вашего сайта. Из этого туториала вы узнаете, как разработать кросс-браузерный плагин jQuery, который создает произвольно размещенный мигающий текст произвольного размера внутри данного поля. Также будут приняты во внимание проблемы инвалидности (эй, мы говорим о перепрошивке текста), предоставляя метод stop() Плагин позволяет использовать несколько анимаций на одной странице, причем каждая анимация полностью независима от других. Конечным результатом будет файл JavaScript, который вы можете легко включить в свои страницы.

Для создания плагина я буду следовать рекомендациям , предложенным для плагина jQuery , поэтому он будет разработан с использованием лучших практик плагина jQuery. Я уже сделал обзор по этой теме в своей статье « Реализация кросс-браузерного контекстного меню в виде плагина jQuery» . Также обратите внимание, что теперь я буду называть плагин «Audero Flashing Text».

Начиная

Теперь, когда я показал вам начальную точку «Audero Flashing Text», вам нужно знать методы, которые будут в нее включены. Не трудно представить, что вам нужен один для инициализации плагина и один для запуска эффекта. Функция инициализации будет использовать некоторые значения по умолчанию, которые будут использоваться, если определенное значение не установлено. Более того, как было сказано в предыдущем разделе, было бы неплохо предоставить вашим пользователям возможность остановить эффект. И последнее, но не менее важное: может быть полезно иметь метод для проверки, работает ли эффект. Следовательно, плагин будет содержать следующее:

  • настройки по умолчанию
  • метод init()
  • метод start()
  • метод stop()
  • isRunning()

Настройки по умолчанию

Всегда полезно иметь некоторую конфигурацию по умолчанию, если некоторые из них не указаны пользователем. Основным свойством «Audero Flashing Text» является набор текста, который показывает, что вы можете указать, используя массив. Поскольку у нас будет мигающий текст, выполняемые им действия: 1. медленно становятся видимыми, 2. остаются видимыми в течение некоторого времени и 3. медленно исчезают. Основываясь на этом поведении, другие полезные настройки — это время появления, длительность и время затухания. Последний параметр, который мы добавим, — это selection Возможные значения для selection Перевод всех этих слов в код приводит к следующему. 

 var defaultValues = {
  strings: [], // Array of strings to show
  fadeIn: 300, // Time in milliseconds
  duration: 500, // Time in milliseconds
  fadeOut: 300, // Time in milliseconds
  selection: "random" // The order of selection of the text.
                      //Possible values: "random", "ascending", "descending"
};

Метод init()

Мы будем использовать метод init() Он принимает только один параметр — объект, содержащий как минимум массив отображаемых строк, а также значения, которые будут перезаписывать значения по умолчанию. В качестве альтернативы, функция может быть вызвана без параметров, и в этом случае применяются значения по умолчанию. В этом случае набор отображаемых строк будет использовать текст дочерних узлов выбранного элемента. Последний способ позволяет сразу начать экспериментировать с плагином. После тестов метод init()visibility На этом этапе последнее, что нужно сделать, это вызвать функцию start() Код для init() 

 init: function(options)
{
  if (typeof options === "undefined" || options === null) {
    options = {};
  }
  if (typeof options.strings === "undefined" || options.strings == null) {
    if (this.children().size() === 0) {
      $.error("If you don't specify the texts to show, the element must have at least a child");
      return;
    }
    else {
      options.strings = this.children().map(function() {
        return $(this).text();
      });
    }
  }

  this.css("position", "relative");
  this.children().css("visibility", "hidden");

  methods.start($.extend({}, defaultValues, options), null, this.attr("id"));
}

Метод start()

Это самая важная часть плагина, потому что он содержит код, который фактически выполняет эффект. Он принимает следующие три параметра.

  • settings
  • index
  • idElem

Как и метод init() После этого он создает элемент <span> Когда он создан, элемент невидим ( display: none Как вы увидите через несколько минут, fadeOut() Последние строки метода устанавливают положение, чтобы элемент соответствовал размеру блока. 

 start: function(settings, index, idElem)
{
  if (typeof idElem === "undefined") {
    idElem = this.selector;
  }
  if (typeof settings === "undefined") {
    $.error("Invalid method call: No settings specified");
    return;
  }
  if (index == null) {
    if (settings.selection === "ascending")
      index = 0;
    else if (settings.selection === "descending")
      index = settings.strings.length - 1;
    else
      index = Math.floor(Math.random() * settings.strings.length);
  }

  var $text = $("&lt;span&gt;")
  .text(settings.strings[index])
  .addClass("audero-flashing-text") // This is used as a bookmark to help the stop method
  .css({
    position: "absolute",
    display: "none",
    fontSize: (Math.random() * 2 + 0.5) + "em"
  })
  .appendTo("#" + idElem)
  .fadeIn(settings.fadeIn)
  .animate({opacity: 1}, settings.duration) // Simulate delay
  .fadeOut(settings.fadeOut, function() {
    // Remove the current element
    $(this).remove();
    var nextIndex;
    if (settings.selection === "ascending")
      nextIndex = (index + 1) % settings.strings.length;
    else if (settings.selection === "descending")
      nextIndex = (index === 0) ? settings.strings.length : index - 1;
    else
      nextIndex = Math.floor(Math.random() * settings.strings.length);
    // Start again the effect
    methods.start(settings, nextIndex, idElem);
  });
  // Set the position so the element will fit the box's size
  var posX = Math.floor(Math.random() * ($("#" + idElem).width() - $text.outerWidth()));
  var posY = Math.floor(Math.random() * ($("#" + idElem).height() - $text.outerHeight()));
  // Set the position of the text
  $text.css({
    left: posX + "px",
    top: posY + "px"
  });
}

Метод stop()

Метод stop()<span> Как вы можете видеть, глядя на источник ниже, текст удаляется плавно. Сначала метод останавливает анимацию (метод jQuery stop()fadeOut()remove() 

 stop: function()
{
  this.css("position", "inherit");
  // Removes the floating text
  this
  .children("span.audero-flashing-text")
  .stop(true)
  .fadeOut(defaultValues.fadeOut)
  .remove();
  // Restore the default visibility
  this.children().css("visibility", "visible");
}

Метод isRunning()

Этот метод очень прост для понимания, потому что он просто проверяет, выполняет ли данный элемент мигающий эффект. Процесс тестирования проверяет элементы <span>audero-flashing-text Метод возвращает truefalse Описанный код указан ниже. 

 isRunning: function()
{
  return (this.children("span.audero-flashing-text").size() > 0);
}

Как использовать плагин

Теперь, когда вы увидели все методы, пришло время увидеть пару примеров. Предположим, что у вас есть следующий <div> 

 <div id="box">
  <p>Lorem>/p>
  <p>Ipsum>/p>
  <p>Dolor</p>
  <p>Sit</p>
  <p>Amet</p>
</div>

Чтобы запустить эффект, используя текст абзацев, все, что вам нужно сделать, это: 

 $("#box").auderoFlashingText();

Ниже приведен пример, в котором используется та же разметка, что и раньше, но с другими настройками: 

 $("#box").auderoFlashingText({
  fadeOut: 1500,
  selection: "ascending"
});

Выводы

В этой статье показано, как создать плагин jQuery, который создает мигающий текстовый эффект для данного поля. Чтобы увидеть, как это работает, загрузите исходный код и ознакомьтесь с документацией, включенной в репозиторий. Плагин Audero Flashing Text полностью бесплатен. Вы также можете изменить его или улучшить, так как он имеет двойную лицензию в соответствии с MIT и GPL-3.0

41
Share: