🥇 Texto com fundo de mosaico de fotos CSS JS

Estava brincando com a colocação de fotos do usuário no fundo de algum texto grande.

imagem do usuário

Utilizando a cor de texto transparente CSS3 e o clipe de fundo, é possível fazer um mosaico de imagens dentro do texto.

Confira a cópia de trabalho completa aqui: JSBin

HTML, CSS e JS básicos. JS provavelmente poderia ser um pouco limpo.

<html>
<body >
  <div id="numbers">
    1,024
  </div>
</body>
</html>

#numbers {
  font: bold 180px Impact, Sans-Serif;
  top: 10px;
  position: absolute;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  background-size: 20px;
  background-position: 0 0;
  background-repeat:  no-repeat;
}

$(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);
});

Related Posts