FitText in ein kleines, praktisches JavaScript-Plugin, um Text-Slogans oder andere größere Text-Elemente in responsive Webdesigns automatisch skalierbar zu machen. Mit Hilfe des Scripts passt sich dein Text-Slogan automatisch an die jeweilige Bildschirm-Breite an und wird dadurch immer optimal lesbar dargestellt.
Das Plugin ist nicht für Fließtexte gedacht, sondern um große Schrift-Slogans, Webseiten-Titel oder Texte in einem großen Header-Bild automatisch an das responsive Design anzupassen. Und so funktioniert die Einbindung des JavaScript-Plugins.
FitText verwenden
Das FitText JavaScript-Plugin von Paravel (der Firma des Webdesigners Trent Walton) kannst du dir kostenlos auf GitHub downloaden und zusammen mit jQuery (z.B. über die Google Hosted Libraries) innerhalb des head-Tags deiner Webseite einbinden:
[code]
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.fittext.js"></script>
[/code]
Achte beim Kopieren des Code-Beispiels vor allem darauf, dass die Datei jquery.fittext.js auch im richtigen Verzeichnis deiner Webseite liegt (also z.B. im Ordner „js“).
FitText in WordPress-Themes einbinden
Wenn du WordPress-Nutzer bist, solltest du das JavaScript besser mit Hilfe der WordPress-Function wp_enqueue_script über die functions.php Datei deines Themes oder Child-Themes einbinden. jQuery selbst kannst du so über die WordPress-eigene jQuery-Version nutzen, indem du das entsprechende handle „jQuery“ im Code setzt:
[code]
function my_scripts_method() {
wp_enqueue_script( ‚fittext‘, get_template_directory_uri() . ‚/js/jquery.fittext.js‘, array( ‚jquery‘ ), ‚1.1‘ );
}
add_action( ‚wp_enqueue_scripts‘, ‚my_scripts_method‘ );
[/code]
Die CSS-Klasse oder -ID deines Text-Elements angeben
Jetzt musst du die CSS-Klasse oder ID deines Text-Slogans nehmen und diese im folgenden JavaScript-Code innerhalb deines head-Tags angeben:
[code]
<script type="text/javascript">
jQuery("#responsive_headline").fitText();
</script>
[/code]
In einem WordPress-Theme musst du den JavaScript-Code im folgenden No-Conflict Mode setzen, wenn die WordPress-eigene jQuery-Version genutzt wird:
[code]
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#responsive_headline").fitText()
});
</script>
[/code]
Hat dein WordPress-Theme eine eigene custom.js Datei (z.B. im Order „js“) kannst du deinen FitText-Code am besten dort unterbringen.
FitText-Optionen
Die Nummer 1.2 im Code zeigt die Stärke der Skalierung an. So kannst du beeinflussen, wie sehr der Text skaliert werden soll. 1 ist dabei der Standard-Wert. Wenn du also 0.8 angibst, wird dein Text etwas geringer bzw. langsamer skaliert:
[code]
jQuery("#responsive_headline").fitText(0.8);
[/code]
Praktisch ist auch die Möglichkeit, eine minimale und maximale Text-Größe in Pixeln zu bestimmen. So hast du eine bessere Kontrolle, wie dein Text auf der Webseite angezeigt wird. Die Text-Größen Begrenzungen kannst du so im Code angeben:
[code]
jQuery("#responsive_headline").fitText(1.2, { minFontSize: ’20px‘, maxFontSize: ’40px‘ })
[/code]
Wichtig ist trotz des Einsatzes von FitText in deinem CSS ebenfalls eine Text-Größe für deinen Text anzugeben. So wird der Text auch ohne Aktivierung von JavaScript noch korrekt angezeigt.
FitText WordPress-Plugin
Möchtest du den Code nicht selbst in dein WordPress-Theme einbinden, kannst du alternativ auch das WordPress-Plugin „FitText.js, a jQuery plugin for inflating web type“ zur Einbindung des JavaScripts installieren.
Weitere JavaScript-Plugins für responsive Webdesigns
Weitere interessante JavaScript-Plugins für responsive Webdesigns von Paravel sind übrigens auch FitVids für die automatische Skalierung eingebetteter Videos und Lettering.js für eine individuelle Kontrolle einzelner Buchstaben mit Hilfe von JavaScript.
Schreibe einen Kommentar