<html>
<head>
<meta name="description" content="image randomness" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset="utf-8">
<title>Images inside text</title>
<title>JS Bin</title>
</head>
<body >
<div id="numbers">
1,024
</div>
<div id="links" style="display:none;">
Links:
http://www.css3.info/preview/background-size/
http://css-tricks.com/animated-knockout-letters/
</div>
</body>
</html>
function getRandom(max){
//Send in a max and it will be from 0-max
return Math.floor(Math.random()*max);
}
function getRandomObj(obj){
//send in an array and it will send a random item back
return obj[getRandom(obj.length)];
}
$(function(){
var $num = $("#numbers");
var maxWidth = $num.width() + 20;
var size = 20;
var xpos = 0;
var ypos = 0;
var time = 0;
var backImage = $num.css("background-image");
var backSize = $num.css("background-size");
var backRepeat = $num.css("background-repeat");
var backPosition = $num.css("background-position");
for (i=0; i<295; i++) {
var img = getRandomObj(images);
backImage += ', url(' + img.src + ')';
backSize += ', ' + String(size) + 'px ' + String(size) + 'px';
backPosition += ', ' + String(xpos) + 'px ' + String(ypos) +'px';
xpos = xpos + size;
if(xpos > maxWidth) {
if(time===0){
xpos = 10;
time = 1;
}else{
xpos = 0;
time = 0;
}
ypos = ypos + size;
}
backRepeat += ', norepeat';
}
$num.css("background-image", backImage);
$num.css("background-size", backSize);
$num.css("background-position", backPosition);
$num.css("background-repeat", backRepeat);
});
//Just random google images
var images = [
{"src": "http://www.dciny.org/images/stories/bio_photos/james-person.jpg"},
{"src": "http://t2.gstatic.com/images?q=tbn:ANd9GcT7gq6Zq4pHoAZtAR_GtKW6Poaave7W90m7VoHruodnMXzB4TRewmNYOv-e"},
{"src": "http://images.huffingtonpost.com/2011-02-09-ethiopiagirl_TylerStablefordGettyImages3.jpg"},
{"src": "http://images03.olx.com.pk/ui/5/13/49/1272269976_42000449_1-Accounts-Assistant-Cashier-Sales-person-Administration-etc-Faisalabad-1272269976.jpg"},{
"src": "http://londonmetstudententerprise.co.uk/wp-content/uploads/2011/03/person.jpg"},
{"src": "http://www.eloquentbooks.com/images/PersonPhoto.jpg"},
{"src": "http://scout.org/var/corporate_site/storage/images/around_the_world/asia_pacific/our_organisation/apr_staff/executive_and_support_staff/perla_del_valle_utility_person/58958-5-eng-GB/perla_del_valle_utility_person.jpg"},{"src": "http://www2.pictures.zimbio.com/gi/Kristin+Chenoweth+2011+MusiCares+Person+Year+cVdzsmg-2IDl.jpg"}, {"src": "http://a0.twimg.com/profile_images/2504920652/eejbihevmffet8uz045r.jpeg"},
{"src": "http://marketers.familyfeatures.com/images/staff/Katie.jpg"},
{"src": "http://www.wnba.com/media/katie-in_300_090106.jpg"},
{"src": "http://images.publicradio.org/content/2011/06/09/20110609_kate-smith_33.jpg"},
{"src": "http://t0.gstatic.com/images?q=tbn:ANd9GcSE0MjWfnCNj4YvbX6RirsvO5Sty0xNDrQcPaj4xeqaAqr2KUbO&t=1"},
{"src": "http://www.mindbodyonline.com/sites/default/files/pic_Smith_Katie250PXW.jpg"}
];
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |