Creating a Flashing Text Effect with jQuery

Core points

• This tutorial guides you how to create a cross-browser-compatible jQuery plugin that achieves flashing text effects and enhances website style and appeal. The plug-in also considers accessibility issues and provides stop() method stop effect.
• The plugin is named "Audero Flashing Text" and is developed in accordance with jQuery plugin best practices. It contains default settings, initialization, start, stop, and isRunning methods. These methods control the text to be displayed, fade in, duration, fade out time, and the order in which text selection is selected.
The
• start() method is the most critical part of the plugin because it runs the effect. It involves creating an element floating within a specified area, the fadeOut() function removes the created element from the DOM, and then runs the effect again based on the current configuration using the next, previous, or random string.
• Tutorial ends with examples of using plugins and adjusting settings such as fade-out time and text selection order. The "Audero Flashing Text" plugin is free and can be modified or improved under the dual license of MIT and GPL-3.0.

Sometimes, you need some cool effects to enhance the look and feel of your website and attract the attention of your visitors. There are many free and instant plugins available on the market to enhance the style of your website. This tutorial will guide you to develop a cross-browser jQuery plugin that creates randomly placed, randomly sized flashing text within a given area. It will also consider accessibility issues (after all, we are talking about flashing text), providing a stop() method to stop the effect. This plugin allows multiple animations on the same page, and each animation is completely independent of other animations. The end result will be a JavaScript file that you can easily include in your page. To create this plugin I will follow the guidelines suggested by the jQuery plugin, so it will be developed using jQuery plugin best practices. I've already outlined this topic in my post "Implementing a cross-browser context menu as a jQuery plugin". Also note that from now on, I refer to the plugin as "Audero Flashing Text".

Start

Now that I have shown you the starting point of “Audero Flashing Text”, you need to understand the methods it will include. It's not hard to imagine that you need a method to initialize the plugin and a method to start the effect. The initialization function will take advantage of some default values, which will be used if no specific values ​​are set. In addition, as mentioned in the previous section, the ability to provide users with a stop effect will be good. Last but not least, having a way to test whether the effect is running can be useful. Therefore, the plugin will contain the following:

• Default settings
• init()Method
• start()Method
• stop()Method
• isRunning()Method

Default settings

It is always useful to have certain default configurations if no user specifies certain settings. The main property of "Audero Flashing Text" is the set of text to be displayed, which you can specify using an array. Because we will have the flashing text, the actions the text will do are: 1. slowly become visible, 2. stay visible for a while, and 3. slowly disappear. Based on this behavior, other useful settings are fade-in time, duration, and fade-out time. The last setting we will add is the selection, which will enable the user to select the order in which text selection is selected. Possible values ​​for selection are random, ascending and descending. Convert all these text into code, and the result is as follows:

<code class="language-javascript">var defaultValues = {
  strings: [], // 要显示的字符串数组
  fadeIn: 300, // 以毫秒为单位的时间
  duration: 500, // 以毫秒为单位的时间
  fadeOut: 300, // 以毫秒为单位的时间
  selection: "random" // 文本选择的顺序。可能的值：“random”、“ascending”、“descending”
};</code>

init() method

We will use the init() method to test how the plugin is called and to style the area where we will run the effect. It only accepts one parameter, an object, which contains at least an array of strings to be displayed, but also contains values ​​that will override the default value. Alternatively, the function can be called without parameters, in which case the default value will be applied. In this case, the set of strings to be displayed will use the text of the child nodes of the selected element. The latter method allows you to start experimenting with the plugin right away. After testing, the init() method will use the visibility CSS attribute to hide the child elements of the selected element, so the height of the area does not decrease. At this point, the last thing to do is to call the start() function to run the animation. The code for init() is as follows:

<code class="language-javascript">init: function(options) {
  if (typeof options === "undefined" || options === null) {
    options = {};
  }
  if (typeof options.strings === "undefined" || options.strings == null) {
    if (this.children().size() === 0) {
      $.error("如果您没有指定要显示的文本，则该元素必须至少有一个子元素");
      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"));
}</code>

start() method

This is the most important part of the plugin because it contains the code that actually runs the effect. It accepts the following three parameters:

• settings – Configure object.
• index – The string to be displayed.
• idElem – The ID of the area where the effect is applied.

Just like the init() method, it first tests the parameters. After that, it creates a <span></span> element that will float on the specified area. After creation, the element is invisible (display: none), so it can appear slowly using the fade method. As you will see later, the fadeOut() function has a callback function that will remove the created element from the DOM and then run the effect again based on the current configuration using the next, previous, or random string. The last few lines of the method set the position so that the element fits in the size of the region.

<code class="language-javascript">var defaultValues = {
  strings: [], // 要显示的字符串数组
  fadeIn: 300, // 以毫秒为单位的时间
  duration: 500, // 以毫秒为单位的时间
  fadeOut: 300, // 以毫秒为单位的时间
  selection: "random" // 文本选择的顺序。可能的值：“random”、“ascending”、“descending”
};</code>

stop() method

The

stop() method is used to stop the animation, remove the last created <span></span> element from the DOM, and then restore the normal visibility attribute. As you can see in the source code below, the text will be removed smoothly. The method first stops the animation (jQuery stop() method), then fades out the text, causing it to slowly disappear from the screen (jQuery fadeOut() method), and then removes it from the DOM (jQuery remove() method).

<code class="language-javascript">init: function(options) {
  if (typeof options === "undefined" || options === null) {
    options = {};
  }
  if (typeof options.strings === "undefined" || options.strings == null) {
    if (this.children().size() === 0) {
      $.error("如果您没有指定要显示的文本，则该元素必须至少有一个子元素");
      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"));
}</code>

isRunning() method

This method is easy to understand because it just tests whether a given element is running a flicker effect. The test process checks the audero-flashing-text element of the class <span></span>. If at least one element is found, the method returns true, otherwise it returns false. The code explained is as follows:

<code class="language-javascript">start: function(settings, index, idElem) {
  if (typeof idElem === "undefined") {
    idElem = this.selector;
  }
  if (typeof settings === "undefined") {
    $.error("无效的方法调用：未指定设置");
    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 = $("<span>")
    .text(settings.strings[index])
    .addClass("audero-flashing-text") // 这用作书签，以帮助停止方法
    .css({
      position: "absolute",
      display: "none",
      fontSize: (Math.random() * 2 + 0.5) + "em"
    })
    .appendTo("#" + idElem)
    .fadeIn(settings.fadeIn)
    .animate({ opacity: 1 }, settings.duration) // 模拟延迟
    .fadeOut(settings.fadeOut, function() {
      // 删除当前元素
      $(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);
      // 再次启动效果
      methods.start(settings, nextIndex, idElem);
    });
  // 设置位置，以便元素适合区域的大小
  var posX = Math.floor(Math.random() * ($("#" + idElem).width() - $text.outerWidth()));
  var posY = Math.floor(Math.random() * ($("#" + idElem).height() - $text.outerHeight()));
  // 设置文本的位置
  $text.css({
    left: posX + "px",
    top: posY + "px"
  });
}</span></code>

How to use this plugin

Now that you have seen all the methods, it's time to check out a few examples. Suppose you have the following <div>: <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;stop: function() { this.css(&quot;position&quot;, &quot;inherit&quot;); // 删除浮动文本 this .children(&quot;span.audero-flashing-text&quot;) .stop(true) .fadeOut(defaultValues.fadeOut) .remove(); // 恢复默认可见性 this.children().css(&quot;visibility&quot;, &quot;visible&quot;); }&lt;/code&gt;</pre> <p>To use the text running effect of a paragraph, you just need to do the following: </p> <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;isRunning: function() { return (this.children(&quot;span.audero-flashing-text&quot;).size() &gt; 0); }&lt;/code&gt;</pre> <p>The following is an example using the same tag as before but with different settings: </p> <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-html&quot;&gt;&lt;div id=&quot;box&quot;&gt; &lt;p&gt;Lorem&lt;/p&gt; &lt;p&gt;Ipsum&lt;/p&gt; &lt;p&gt;Dolor&lt;/p&gt; &lt;p&gt;Sit&lt;/p&gt; &lt;p&gt;Amet&lt;/p&gt; &lt;/div&gt;&lt;/code&gt;</pre> <p><strong>Conclusion</strong></p> <p>This article shows you how to create a jQuery plugin that creates a flashing text effect on a given area. To see how it works, download the source code and view the documentation included in the repository. The "Audero Flashing Text" plugin is completely free. You can also change it or improve it further because it has a dual license for MIT and GPL-3.0. </p> <p><strong>(The FAQ) should be added here on creating a flashing text effect using jQuery, consistent with the FAQ part of the input text, but some rewrites and streamlining can be done to make it more concise and clear . )</strong></p> </div>

The above is the detailed content of Creating a Flashing Text Effect with jQuery. For more information, please follow other related articles on the PHP Chinese website!