JAVASCRIPT   24

morphext.js

Guest on 6th August 2021 06:41:31 PM

  1. /*!
  2.  * Morphext - Text Rotating Plugin for jQuery
  3.  * https://github.com/MrSaints/Morphext
  4.  *
  5.  * Built on jQuery Boilerplate
  6.  * http://jqueryboilerplate.com/
  7.  *
  8.  * Copyright  Ian Lai and other contributors
  9.  * Released under the MIT license
  10.  * http://ian.mit-license.org/
  11.  */
  12.  
  13. /*eslint-env browser */
  14. /*global jQuery:false */
  15. /*eslint-disable no-underscore-dangle */
  16.  
  17. (function ($) {
  18.     "use strict";
  19.  
  20.     var pluginName = "Morphext",
  21.         defaults = {
  22.             animation: "bounceIn",
  23.             separator: ",",
  24.             speed: 2000,
  25.             complete: $.noop
  26.         };
  27.  
  28.     function Plugin (element, options) {
  29.         this.element = $(element);
  30.  
  31.         this.settings = $.extend({}, defaults, options);
  32.         this._defaults = defaults;
  33.         this._init();
  34.     }
  35.  
  36.     Plugin.prototype = {
  37.         _init: function () {
  38.             var $that = this;
  39.             this.phrases = [];
  40.  
  41.             this.element.addClass("morphext");
  42.  
  43.             $.each(this.element.text().split(this.settings.separator), function (key, value) {
  44.                 $that.phrases.push($.trim(value));
  45.             });
  46.  
  47.             this.index = -1;
  48.             this.animate();
  49.             this.start();
  50.         },
  51.         animate: function () {
  52.             this.index = ++this.index % this.phrases.length;
  53.             this.element[0].innerHTML = "<span class=\"animated " + this.settings.animation + "\">" + this.phrases[this.index] + "</span>";
  54.  
  55.             if ($.isFunction(this.settings.complete)) {
  56.                 this.settings.complete.call(this);
  57.             }
  58.         },
  59.         start: function () {
  60.             var $that = this;
  61.             this._interval = setInterval(function () {
  62.                 $that.animate();
  63.             }, this.settings.speed);
  64.         },
  65.         stop: function () {
  66.             this._interval = clearInterval(this._interval);
  67.         }
  68.     };
  69.  
  70.     $.fn[pluginName] = function (options) {
  71.         return this.each(function() {
  72.             if (!$.data(this, "plugin_" + pluginName)) {
  73.                 $.data(this, "plugin_" + pluginName, new Plugin(this, options));
  74.             }
  75.         });
  76.     };
  77. })(jQuery);

Raw Paste


Login or Register to edit or fork this paste. It's free.