Text Image mask with Rotating background images

index.html

<h1 class="masked-text-bg">
  <div class="background-images" class="hidden">
    <img data-src="//c1.staticflickr.com/2/1569/25480373184_8f955d49fa.jpg" class="hidden" />
    <img data-src="//c1.staticflickr.com/2/1630/26065484576_498aa4bb54.jpg" class="hidden" />
    <img data-src="//c4.staticflickr.com/2/1460/25492385523_c236efab7f.jpg" class="hidden" />
  </div>
  <span>Dare</span>
</h1>

script.js

;( function( $, window, document, undefined ) {

	"use strict";

		var pluginName = "textBGMask",
			defaults = {
				speed: 100
			};

		function Plugin ( element, options ) {
			this.element = element;
			this.settings = $.extend( {}, defaults, options );
			this._defaults = defaults;
			this._name = pluginName;
			this.init();
		}

		$.extend( Plugin.prototype, {
			init: function() {
				this.loadImages();
			},
			loadImages: function() {
				//find images in the current element and start loading...
				var _$el = $(this.element),
			        _$imagesArr = _$el.find('img'),
			        _loadedImages = 0,
			        _that = this;
			    
			      if(_$imagesArr.length > 0) {

			        _$imagesArr.each(function() {

			          var _$img = $(this),
			          _src = _$img.attr('data-src');

			          _$img.attr('src', _src).load(function() {
			            ++_loadedImages;
			            if(_loadedImages === _$imagesArr.length) {
			              _$el.css('background-image', 'url(' + $(_$imagesArr[0]).attr('data-src') + ')').addClass('state-ready');
			              _that.setState('current', 0);
			              _that.setState('total', _loadedImages);
			              _$el.on('mouseenter', function(e) {
                      _that.start(e, _that);
                    });
			              _$el.on('mouseleave', function(e) {
                      _that.stop(e, _that);
                    });
			            }
			          });

			        });
			      }
			},
      setState: function(state, value) {
				$(this.element).attr('data-' + state, value);
			},
			getState: function(state) {
				return $(this.element).attr('data-' + state);
			},
			start: function(e, ctx) {
				ctx.setState('stopped', false);
				ctx.startRotating(ctx);
			},
			stop: function(e, ctx) {
				ctx.setState('stopped', false);
			},
			startRotating: function(ctx) {
				var _current = parseInt(ctx.getState('current')),
					_total = parseInt(ctx.getState('total')),
					_next = _current + 1,
					_$imagesArr = $(ctx.element).find('img');

				if(_next === _total) {
					_next = 0;
				}
        
        ctx.setState('current', _next);

				$(this.element).css('background-image', 'url(' + $(_$imagesArr[_next]).attr('data-src') + ')');

				if( !Boolean(ctx.getState('stopped')) ) {
					setTimeout(function() {
            ctx.startRotating(ctx);
          }, ctx.settings.speed);
				}
			}			
		} );

		// A really lightweight plugin wrapper around the constructor,
		// preventing against multiple instantiations
		$.fn[ pluginName ] = function( options ) {
			return this.each( function() {
				if ( !$.data( this, "plugin_" + pluginName ) ) {
					$.data( this, "plugin_" +
						pluginName, new Plugin( this, options ) );
				}
			} );
		};

} )( jQuery, window, document );


(function($) {
  
  $('.masked-text-bg').textBGMask();
  
//   $('.masked-text-bg').each(function() {
    
//     var _$el = $(this),
//         _$imagesArr = _$el.find('img'),
//         _loadedImages = 0;
    
//     if(_$imagesArr.length > 0) {
      
//       _$imagesArr.each(function() {
//         var _$img = $(this),
//         _src = _$img.attr('data-src');
    
//         _$img.attr('src', _src).load(function() {
//           ++_loadedImages;
//           if(_loadedImages === _$imagesArr.length) {
//             _$el.css('background-image', 'url(' + $(_$imagesArr[0]).attr('data-src') + ')').addClass('state-ready');
//           }
//         });
        
//       });
      
//     }
    
//   });
  
})(jQuery);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

style.less

.hidden {
  display: none;
}

.masked-text-bg {
  background-repeat:repeat-x;
  background-position:0 0;
  font-size:298px;
  text-transform:uppercase;
  text-align:center;
  font-family: Georgia;
  color:transparent;
  -webkit-font-smoothing:antialiased;
  -webkit-background-clip:text;
  -moz-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin:0;
}

Text Image mask with Rotating background images.markdown

Text Image mask with Rotating background images

A Pen by Muluneh Awoke on CodePen.

License.