Для начала, хочу всех поздравить с первым днем наступления зимнего времени и приближении к нам Наступающего Нового Года! Да, да, - до Нового Года остался ровно один месяц и надеюсь, что каждый сможет отлично к нему подготовиться, а также его встретить!
А сегодня мы с Вами рассмотрим адаптивный текст, который подготовлен с помощью плагина FitText. По названию, я надеюсь, Вы уже смогли догадаться, что адаптивный текст, это такой текст, который может правильно располагаться по всей ширине экрана монитора или мобильного устройства. Главной его особенностью, является то, что при уменьшении размера, текст, свойственно ему, преобразуется и тоже уменьшается. Абсолютно такая же суть происходит при увеличении размера. Но при изучении данного плагина, Вы поймете, что можно будет задавать определенные js свойства, которые будут влиять на параметры текста.
Перед тем, как начать изучать плагин, подготовленный нами для демонстрации, советую ознакомиться с официальным сайтом плагина FitText, а также перейти на GitHub для более детального изучения его функционала.
С данным плагином, я задумал Вас познакомить после того, как были написаны два урока по работе с текстом программистом и автором Алексеем Копча, на темы: вращение текста JQuery и как легко анимировать текст.
Переходя на официальный сайт плагина FitText, мы долго там не задерживаемся и переходим сразу по ссылке Download on Github. Попадаем на GitHub и сразу же начинаем знакомиться подробно с описанием плагина.
Подключаем необходимые библиотеки, а именно стандартную библиотеку jquery.min.js и библиотеку самого плагина jquery.fittext.js, а также не забывает про плагин настроек, который будем рассматривать во-второй части, - компрессор.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
jQuery("#responsive_headline").fitText();
</script>
Компрессор служит для изменения размера, если это становится необходимым при плохих результатах. Ну к примеру, Ваш текст плохо отобразился при уменьшении или увеличении разрешения. Для этого необходимо его применить, чтобы добиться максимально четкого и правильного отображения текста.
jQuery("#responsive_headline").fitText(1.2); // Turn the compressor up (resizes more aggressively)
jQuery("#responsive_headline").fitText(0.8); // Turn the compressor down (resizes less aggressively)
Помимо этого, при помощи свойств minFontSize и maxFontSize, можно четко отрегулировать пропорции минимального и максимального отображения текста в пикселях.
jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' });
В описании по стилям CSS, сказано, что нужно использовать блочные или инлайн-блочные элементы: display: block или display: inline-block.
Также, обязательно, нужно указывать ширину блока в процентах, который будет выводиться.
Переходим к нашему скрипту адаптивного текста, реализованного с помощью плагина FitText и сразу же подключаем библиотеки JS и стили CSS, которые были указаны в первом шаге, а то есть:
<link type="text/css" rel="stylesheet" href="css/demo.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/jquery.fittext.js"></script>
Теперь подключаем блочный элемент div с идентификатором responsive, который взаимодействует с библиотекой jquery.fittext.js, нашим скриптом и стилями CSS.
<div id="responsive">RootHelp.ru - все для разработки Вашего сайта</div>
Добавляем скрипт, который будет задавать необходимые пропорции по минимальной и максимальной ширине текста.
<script>
jQuery("#responsive").fitText(2,{ minFontSize: '10px', maxFontSize: '175px'});
</script>
И конечно же, стили CSS, без которых не обойтись! Для общего контента, указываем ширину в процентах равную 80, а для идентификатора responsive прописываем ширину в процентах 100 и размер шрифта 12 пикселей.
#content{
margin:20px auto 0px;
width:80%;
}
#responsive{
width:100%;
font-size:12px;
}
Вот так вот, можно легко и просто адаптировать текст с помощью плагина FitText для своего сайта! Спасибо всем за внимание, удачи в реализации! Жду комментариев и лайков)