jQuery Splatter Plugin

A very simple example.


              $('#simple_splatter').splatter({
          height: 250,
          width: 700
        });

Let's say you want more splats.


              $('#many_splatters').splatter({
          height: 250,
          width: 700,
          splat_count: 120
        });

And if you'd rather use words.


              $('#word_splatter').splatter({
          height: 250,
          width: 700,
          min_font_size: 20,
          max_font_size: 50,
          splats: ["Lorem", "Ipsum", "Dolor", "Sit", "Amet", "Consectetur", "Adipisicing", "Elit", "Sed", "Do", "Eiusmod", "Tempor", "Incididunt", "Ut", "Labore", "Et", "Dolore", "Magna", "Aliqua", "Ut", "Enim", "Ad", "Minim", "Veniam", "Quis", "Nostrud", "Exercitation", "Ullamco", "Laboris", "Nisi", "Ut", "Aliquip", "Ex", "Ea", "Commodo", "Consequat"]
        });

Suppose you don't want random colors.


              $('#gray_words').splatter({
          height: 250,
          width: 700,
          min_font_size: 20,
          max_font_size: 50,
          colors: ['#ccc', '#e0e0e0', '#333', '#666', '#999'],
          splats: ["Lorem", "Ipsum", "Dolor", "Sit", "Amet", "Consectetur", "Adipisicing", "Elit", "Sed", "Do", "Eiusmod", "Tempor", "Incididunt", "Ut", "Labore", "Et", "Dolore", "Magna", "Aliqua", "Ut", "Enim", "Ad", "Minim", "Veniam", "Quis", "Nostrud", "Exercitation", "Ullamco", "Laboris", "Nisi", "Ut", "Aliquip", "Ex", "Ea", "Commodo", "Consequat"]
        });

Splats that animate color on hover.


            // javascript
      $('#animated_colors').splatter({
        width: 700,
        height: 250,
        splat_count: 100,
        colors: ['#ccc', '#e0e0e0', '#333', '#666', '#999'],
        custom_attributes: [
          { name: "data-hover_color", values: ['#f68a00', '#069', '#a70', '#090', '#ff1493', '#0066CC', '#ff1493', '#F0E356'] }
        ],
        hover_on: function(splat) {
          var original_color = splat.css('color');
          var hover_color = splat.attr('data-hover_color')
          splat.css('color', hover_color).attr('data-hover_color', original_color);
        },
        hover_off: function(splat) {
          var original_color = splat.css('color');
          var hover_color = splat.attr('data-hover_color');
          splat.css('color', hover_color).attr('data-hover_color', original_color);
        }
      });
    
      // CSS3 for color animations
      #animated_colors.splatter_box .splat {
        transition: color 0.5s linear;
        -moz-transition: color 0.5s linear;
        -o-transition: color 0.5s linear;
        -webkit-transition: color 0.5s linear;
        cursor: pointer;
      }

Splats that rotate on hover.


              $('#rotating_splats').splatter({
          height: 250,
          width: 700,
          splat_count: 300,
          max_font_size: 150,
          custom_attributes: [
            { name: "data-rotation_degrees", values: ['rotate(180deg)', 'rotate(90deg)', 'rotate(25deg)', 'rotate(360deg)' ] }
          ],
          hover_on : function(splat) {
            var rotation_degrees = splat.attr('data-rotation_degrees');
            splat.css('-webkit-transform', rotation_degrees);
          },
          hover_off : function(splat) {
            splat.css('-webkit-transform', 'rotate(0deg)');
          }
        });
        
        // css3 for rotation
        #rotating_splats.splatter_box .splat {
          -webkit-transform-origin:0 0;
          -webkit-transform: rotate(0deg);
          -webkit-transition:-webkit-transform 0.2s ease-in-out;
          cursor: pointer;
        }

Splats that don't overlap (depends on jquery.masonary.js).


              $('#no_overlap_splats').splatter({
          height: 250,
          width: 800,
          splat_count: 50
        });

        // you'll need to include the masonry plugin. Checkout the readme for details.
        $('#no_overlap_splats').masonry();
        
        // And override a bit of CSS
        #no_overlap_splats {
          position: static !important;
          top: auto !important;
          left: auto !important;
          float: left;
        }