Примеры:
HTML:
|
1 |
<div data-image="bg-image.jpg" data-bg="#000" data-height="500" data-text="Taylor Hill" data-repeat="880" data-minfont="9" data-maxfont="11" class="text-bg"></div> |
Где:
data-image - фоновое изображение
data-bg - цвет фона
data-height - высота блока
data-text - текст, который будет повторятся и накладываться на фон
data-repeat - число повторов этого текста
data-minfont - минимальный размер шрифта
data-maxfont - максимальный размер шрифта
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.text-bg-wrap { border: 6px solid #BFE2FF; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .text-bg { line-height: 0.5; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: rgba(0,0,0,.1); word-break: break-all; overflow: hidden; font-family: Verdana, sans-serif; font-weight: bold; } |
Где:
.text-bg-wrap - контейнер, в который вкладывается блок с изображением
JS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function getRandomInRange(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } $(function() { $('.text-bg').each(function() { let dbg = $(this).attr('data-bg'); $(this).wrap('<div class="text-bg-wrap" style="background: '+ dbg +';"></div>'); let dtext = $(this).attr('data-text'); let dheight = $(this).attr('data-height'); let minfont = Number($(this).attr('data-minfont')); let maxfont = Number($(this).attr('data-maxfont')); let dimage = $(this).attr('data-image'); let repeat = $(this).attr('data-repeat'); let dall = ''; for (step = 0; step < repeat; step++) { dall += '<span style="font-size: '+ getRandomInRange(minfont, maxfont) +'px">'+ dtext +'</span> '; } $(this).html(dall); $(this).css('height', dheight); $(this).css('background-image', 'url(' + dimage + ')'); }); }); |
Добавить комментарий: