Affichage de textes en blocs

by oilvier

HTML

<script src="https://gitcdn.xyz/repo/davatron5000/Lettering.js/master/jquery.lettering.js"></script>
<script src="https://gitcdn.xyz/repo/freqdec/slabText/master/js/jquery.slabtext.min.js"></script>
<div class="slab js-slab-text">9 mois, c'est le<br /> temps de vie que<br /> permettrait de gagner<br /> une meilleure qualité d'air*</div>

SCSS

.slabtexted .slabtext {display:inline-block; white-space:nowrap;}
.slabtextinactive .slabtext {display:inline; white-space:normal; font-size:1em!important; letter-spacing:inherit!important; word-spacing:inherit!important; *letter-spacing:normal!important; *word-spacing:normal!important;}
.slabtextdone .slabtext {display:block;}

/**
 * Affichage du texte en blocs (via JS) 
 * Chaque ligne doit être séparée par un `br`
<div class="slab js-slab-text">
	Plusieurs <br>
	lignes <br>
	de texte
</div>
 */
.slab {margin:0 auto; width:100%; text-transform:uppercase;
	/* Chaque ligne est découpée en span avec la classe `.slabtext` */
	& .slabtext {line-height:0.9;}
}
.slab--soft {text-transform:none;}

JavaScript

/**
 * On utilise d'abord lettering.js pour séparer le texte au niveau
 * de chaque <br> avec un span 
 * Une fois ce travail effectué, on ajoute la classe `.slabtext` sur
 * chaque <span> et on laisse ensuite slabText calculer les font-size
 * pour aligner nos textes
 * + On ajoute une classe globale pour indiquer que les animations
 * peuvent être lancées
 */
if ($('.js-slab-text').length) { 

	$(".js-slab-text").lettering('lines');
	$(".js-slab-text").promise().done(function(){
		$(this).find('span').addClass('slabtext');
		$('.js-slab-text').slabText();
		$(".js-pack").matchHeight(true);	
	});
}