Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<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

Dismiss x
public
Bin info
dsmith1024pro
0viewers