$('#simple_splatter').splatter({
height: 250,
width: 700
});
$('#many_splatters').splatter({
height: 250,
width: 700,
splat_count: 120
});
$('#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"]
});
$('#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"]
});
// 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;
}
$('#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;
}
$('#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;
}