Резиновый текст

468

23 августа 2017, 17:20

Как создать такой эффект с текстом

Answer 1

Вам нужно растягивать текст и в ширину, и в высоту, а так как соотношение сторон может меняться - то обычным font-size здесь не обойтись. Как вариант - сделать блок, который будет иметь ширину и высоту в зависимости от текста внутри (т.е. auto) и уже этот блок поместить в тот блок, который можно будет растягивать. А уже при изменении его высоты\ширины высчитывать коэффициент насколько она больше высоты\ширины блока с текстом и применять к блоку с текстом transform: scaleX(coeffW) для ширины и transform: scaleY(coeffH) для высоты

Получится вот такая функция, которую необходимо применять для блока каждый раз, когда нужно чтобы текст подстраивался:

function resize(block){
  block.css({
    'transform-origin': '0 0',
    'transform': 'scaleX(1) scaleY(1)'
  });
  var parent = block.parent(),
        block_width = block.outerWidth(),
        block_height = block.outerHeight(),
        parent_width = parent.width(),
        parent_height = parent.height(),
      coeffX = parent_width / block_width,
      coeffY = parent_height / block_height;
  block.css({
    'transform-origin': '0 0',
    'transform': 'scaleX('+coeffX+') scaleY('+coeffY+')'
  });  
}

Пример: https://jsfiddle.net/92avdxyv/1/

Answer 2

//авто_подбор_текста_под_контейнер 
//работает через jQuery 
(function($) { 
  $.fn.sizeText = function(kompressor, options) { 
    var compressor = kompressor || 1, 
      settings = $.extend({ 
        'minFontSize': Number.NEGATIVE_INFINITY, 
        'maxFontSize': Number.POSITIVE_INFINITY 
      }, options); 
    return this.each(function() { 
      var $this = $(this); 
      var resizer = function() { 
        $this.css('font-size', Math.max(Math.min($this.width() / (compressor * 10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); 
      }; 
      resizer(); 
      $(window).on('resize.sizetext orientationchange.sizetext', resizer); 
    }); 
  }; 
})(jQuery); 
//вставить_в_контейнер(body,div куда нужно) id="sizeText" 
//в функцию нужный размер текста --> sizeText(1) 
//автоматически размер текста будет изменяться 
$(document).ready(function() { 
  $("#sizeText").sizeText(1); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body id="sizeText"> 
 
  <div> 
    HTML 
  </div> 
 
</body>