floatr/floatr.js

Float images across the background of a block element

;(function($, window, undefined){

  var animationEnd = 'webkitAnimationEnd oanimationend msAnimationEnd animationend';

  var default_images = [
    'http://4.bp.blogspot.com/-e1GZjQK2Nb4/UiASiFoFOPI/AAAAAAAAJC8/5K3jU1LPnUI/s1600/Background-Scenery1.jpg',
    'http://images2.layoutsparks.com/1/169266/midnight-snow-lovely-scenery.jpg',
    'http://2.bp.blogspot.com/-_KBHnU3PdX4/UTdXMQT7hvI/AAAAAAAAUJY/TAnmZNKbXfk/s1600/Night+Scenery+Wallpapers+6.jpg',
    'http://www.pageresource.com/wallpapers/wallpaper/hot-air-balloon-beside-the-beautiful-scenery_62702.jpg',
    'http://media.tinmoitruong.vn/public/media/media/picture/03/HaGiang2.jpg',
    'http://www.trilliumridgeliving.com/images/May%20scenery%202010%20012.jpg',
    'http://3.bp.blogspot.com/-m7HYrLkpxL8/UNiDj7j6QWI/AAAAAAAADP0/zrcIB9V3oRc/s640/Moraine_Lake_Valley_of_Ten_Peaks-Beautiful_natural_scenery_wallpaper_1366x768.jpg'
  ];

  var params = {
    $floatr: null,
    faClass: null,
    nElements: 10,
    urls: default_images,
    imgSize: '100px',
    interval: 2000,
    speed: 'five-s',
    vertical: true,
    reversed: false
  };

  self.fn = {};

  $.fn.floatr = function(options){
    $.extend(params, options);
    params.$floatr = $(this).addClass('floatr ' + fn.orientation());

    var elementFn = (params.faClass) ? fn.faElement : fn.imgElement;

    fn.makeElements(elementFn);
    fn.animate();
    return self;
  };

  fn.animate = function(){
    window.setInterval(function(){
      fn.sample($('.transition-wrapper').not('.active')).addClass(fn.activeClass())
        .on(animationEnd, fn.dequeue);
    }, params.interval);
  };

  fn.dequeue = function(e){
    $(e.target).removeClass(fn.activeClass());
  };

  fn.makeElements = function(element){
    var i = params.nElements || params.urls.length;
    var $elements = [];
    while (i--){
      $element = element(i);
      $elements.push($('<div>').addClass('transition-wrapper').append($element));
    }
    params.$floatr.append($elements)
  };

  fn.faElement = function(){
    return $('<span>').addClass(params.faClass);
  };

  fn.imgElement = function(index){
    url = params.urls[index % params.urls.length];
    return $('<img>').attr('src', url).addClass('image').css(fn.normalizedDimension(), params.imgSize);
  };

  fn.orientation = function(){
    return (params.vertical)? 'vertical' : 'horizontal';
  };

  fn.activeClass = function(){
    var classes =  (params.reversed)? 'active reversed ' : 'active forward ';
    return classes + params.speed
  };

  fn.normalizedDimension = function(){
    return (params.vertical)? 'height' : 'width';
  };

  fn.sample = function(array){
    var index = ~~(Math.random() * array.length);
    return $(array[index]);
  };

})(jQuery, window);