Anzeige
Tutorialbeschreibung

jQuery - Die Schrift mit FontEffect ändern

jQuery - Die Schrift mit FontEffect ändern

Wer ausgefallene Schriftarten oder Schrifteffekte auf seiner Webseite verwenden möchte, hat prinzipiell zwei Möglichkeiten: Die Texte werden als Grafiken eingebunden, oder man setzt CSS ein. Beide Lösungen sind allerdings nicht befriedigend. Genau hier kommt das jQuery-Plug-in FontEffect ins Spiel. Denn damit lassen sich Schatten, Verläufe, Spiegelungen usw. auf Texte anwenden.


Wer Schriften optisch aufpeppen will, scheitert an den eingeschränkten Möglichkeiten, die CSS zu bieten hat. Viele Entwickler bzw. Webdesigner greifen daher auf Grafiken zurück. Das kann man zwar durchaus so machen, ideal ist das allerdings nicht. Denn allein schon aus semantischen Gründen und hinsichtlich der Suchmaschinentauglichkeit der Seite sollte man Texte (und hier vor allem Überschriften) nicht als Grafiken einfügen. Bliebe noch eine PHP-basierte Variante, bei der Schriften serverseitig generiert werden. Das Problem dabei: Auch hier werden Grafiken erzeugt. Genau an diesem Punkt wird das jQuery-Plug-in FontEffect interessant. Die offizielle Projektwebseite finden Sie unter http://www.iofo.it/jquery/fonteffect/.

Momentan stellt das Plug-in vier Effekte zur Verfügung, die auf Texte angewendet werden können.

  • Outline
  • Shadow
  • Gradient
  • Mirror

Für sämtliche Effekte werden weder Grafiken noch zusätzliche CSS-Eigenschaften benötigt. Das Plug-in selbst hat lediglich eine Größe von 7k in der minimierten Variante. Um FontEffect nutzen zu können, müssen Sie zunächst jQuery einbinden. Anschließend wird die eigentliche FontEffect-Datei integriert.
<script type="text/javascript" src="jquery"></script>
<script type="text/javascript" src="jquery-FontEffect-1.0.0.min.js"></script>

Im einfachsten Fall wird FontEffect folgendermaßen verwendet:
$("#bereich").FontEffect()

Das ist die Standardeinstellung, bei der keine Optionen angegeben wurden. Diese Definition entspricht den folgenden Einstellungen:
[Beispiel anzeigen]

<script type="text/javascript">
 /* <![CDATA[ */
  $(document).ready(function(){
     $("#bereich").FontEffect({
     outline:true
 })
 });
 /* ]]> */
</script>

 
Das Ergebnis sieht folgendermaßen aus:

Bilder



 
Dabei handelt es sich um den Outline-Effekt. Neben Outline gibt es noch drei weitere Effekte. Da wäre zunächst Shadow.

Bilder



Dieser Effekt weist dem Text einen Schatten zu. In den folgenden Beispielen wird jeweils auf die gleiche CSS-Syntax zugegriffen.
#bereich {
     font-family :"Impact";
     color       :#000;
     font-size   :3em;
 }

Um den Schatteneffekt auf den Text anzuwenden, wird die folgende Syntax verwendet:
[Beispiel anzeigen]

<script type="text/javascript">
 /* <![CDATA[ */
  $(document).ready(function(){
     $("#bereich").FontEffect({
     shadow:true
 })
 });
 /* ]]> */
 </script>

 
Ein weiterer interessanter Effekt ist Gradient.

Bilder



Dieser lässt sich ebenfalls wieder sehr einfach anwenden.
[Beispiel anzeigen]

<script type="text/javascript">
 /* <![CDATA[ */
  $(document).ready(function(){
     $("#bereich").FontEffect({
     gradient:true
 })
 });
 /* ]]> */
</script>

 
Und dann gibt es noch den Effekt Mirror. Dadurch wird die Schrift mit einem Spiegeleffekt ausgestattet.

Bilder



Und auch hierzu wieder ein Beispiel:
[Beispiel anzeigen]

<script type="text/javascript">
 /* <![CDATA[ */
  $(document).ready(function(){
     $("#bereich").FontEffect({
     mirror:true
 })
 });
 /* ]]> */
 </script>

 
Auf ein und denselben Text lassen sich übrigens auch mehrere Effekte anwenden.

Bilder



Dazu muss man die gewünschten Effekte lediglich parallel angeben.
[Beispiel anzeigen]

<script type="text/javascript">
 /* <![CDATA[ */
  $(document).ready(function(){
     $("#bereich").FontEffect({
     gradient:true,
     mirror:true,
     mirrorColor:"#298d79"
   
 })
 });
 /* ]]> */
</script>

 

Die möglichen Parameter

In den vorherigen Beispielen wurden bereits einige Optionen vorgestellt, die FontEffect zu bieten hat. Es gibt allerdings noch deutlich mehr. Die folgende Übersicht zeigt, welche Optionen bzw. Parameter zur Verfügung stehen.
  • outline :false, – Wendet den Outline-Effekt an.
  • outlineColor1 :"",–  Legt die Farbe der linken Linie fest. Erwartet wird eine Farbangabe.
  • outlineColor2 :""  –  Legt die Farbe der linken Linie fest. Erwartet wird eine Farbangabe.
  • outlineWeight :1, – Bestimmt die Dicke der Linie. Mögliche Werte sind 1=dünn, 2=normal und 3=fett.
  • mirror :false, – Wendet den Mirror-Effekt an.
  • mirrorColor :"" – Bestimmt die Spiegelfarbe.
  • mirrorOffset :-10 – Bestimmt den Abstand des Spiegelbildes vom Text.
  • mirrorHeight :50, – Legt die Höhe des Spiegelbildes fest.
  • mirrorDetail :1, – Bestimmt, wie detailliert das Spiegelbild aussehen soll. Mögliche Werte sind 1=sehr detailliert ,2=normal und 3=wenige Details.
  • mirrorTLength :50,  –  Hierüber legt man fest, wie stark der Spiegeleffekt zu sehen sein soll.
  • mirrorTStart :0.2, – Legt fest, wie durchsichtig der Effekt zu Beginn aussehen soll.
  • shadow :false, – Wendet den shadow-Effekt an.
  • shadowColor :"#000", – Hierüber wird die Farbe des Schattens bestimmt.
  • shadowOffsetTop :5,  – Bestimmt die Startposition des Schattens von oben. Erlaubt ist ein Pixelwert.
  • shadowOffsetLeft:5,  – Bestimmt die Startposition des Schattens von links. Erlaubt ist ein Pixelwert.
  • shadowBlur :1, – Bestimmt, wie verschwommen der Schatten aussehen soll. Mögliche Werte sind 1=kein Wischeffekt, 2=niedriger Effekt und 3=hoher
  • Wischeffekt.
  • shadowOpacity :0.1, – Hierüber können Sie festlegen, wie durchsichtig der Schatten sein soll. Mögliche Werte sind 0=nicht durchsichtig und 1=durchsichtig.
  • gradient :false, – Wendet den Gradient-Effekt an.
  • gradientColor :"", – Hierüber bestimmt man die Farbe des Verlaufs.
  • gradientPosition:20, – Bestimmt die Startposition des Verlaufs. Erwartet wird ein Prozentwert.
  • gradientLength :50, – Damit wird die Länge des Verlaufs festgelegt. Auch hier wird ein Prozentwert erwartet.
  • gradientSteps :20, – Legt die Anzahl der Schritte des Verlaufs fest.
  • hideText :false, – Bestimmt, ob der eigentliche Text angezeigt werden soll.

Die einzelnen Optionen lassen sich sehr einfach einsetzen. Es ist lediglich darauf zu achten, dass die Parameter jeweils mit Kommata voneinander zu trennen sind. Nach dem letzten Parameter wird kein Komma gesetzt. Auch hierzu wieder ein Beispiel:
[Beispiel anzeigen]

<script type="text/javascript">
 /* <![CDATA[ */
  $(document).ready(function(){
   $("#bereich").FontEffect({
     shadow:true,
     shadowColor:"#f00",
     shadowOffsetTop:4,
     shadowOffsetLeft:4,
     shadowOpacity:1,
     outline:true,
     outlineColor1:"#fff",
     outlineWeight:2
 })
 });
 /* ]]> */
</script>

Die zugrundeliegende CSS-Syntax sieht folgendermaßen aus:
<style type="text/css">
 #bereich {
             font-family:"Arial black";
             font-size:3.0em;
             color:#fff;
             font-weight:bold;
 }
</style>

Und auch hier das Ergebnis im Browser.

Bilder



 
Durch den Einsatz von CSS und die Kombination der verschiedenen Parameter lassen sich erstklassige und vor allem interessante Effekte erzielen. Das gilt vor allem auch im Zusammenhang mit Hintergrundfarben. Sehen Sie sich hierfür zunächst die folgende Abbildung an:

Bilder



 
Hier wurde eine Hintergrundfarbe definiert. Erst dadurch werden die einzelnen Parameter überhaupt sichtbar. Wie die gleiche Anwendung ohne den Einsatz einer Hintergrundfarbe aussieht, sehen Sie auf dem folgenden Screenshot.

Bilder



Um den gewünschten Effekt zu erreichen, wurden verschiedene Parameter verwendet. Die vollständige Syntax sieht folgendermaßen aus:
[Beispiel anzeigen]

<script type="text/javascript">
 /* <![CDATA[ */
  $(document).ready(function(){
   $("#bereich").FontEffect({
 mirror:true,
     mirrorColor:"#fff",
     mirrorOffset:-20,
     mirrorHeight:50,
     mirrorDetail:3,
     mirrorTLength:80,
     mirrorTStart:0.5,
     gradient:true,
     gradientColor:"#ccc",
     gradientFromTop:true,
     gradientPosition:20,
     gradientLength:50,
     gradientSteps:20
 })
 });
 /* ]]> */
</script>

Und hier noch die CSS-Syntax:
<style type="text/css">
 body {
 background-color:#CC0033;
 }
 #bereich {
  font-family:"Times new roman";
   font-weight:bold;
   margin-bottom:60px;
   font-size:60px;
   color:#fff
 }
</style>

Fazit

Weitere interessante Beispiele dazu, wie sich das Plug-in einsetzen lässt, finden Sie auf der Seite http://www.iofo.it/jquery/fonteffect/.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von websmurf
  • 02.08.2010 - 12:36

Gute Idee für Suchmaschinenoptimierte Effekte.

Portrait von befi
  • 29.07.2010 - 08:47

Macht einen guten Eindruck ... werde das wohl in "stiller Stunde" mal antesten...

Portrait von Lordi
  • 28.07.2010 - 20:07

dies es tut ist leicht verständlich und gut übersichtlich.

Portrait von thexe
  • 27.07.2010 - 19:19

"outline :false, – Wendet den Outline-Effekt an."
na ob das wohl richtig ist :D

ansonsten nettes tutorial, ein jammer das ich nich dazu komme selbst mit JS intensiver zu arbeiten :)

x
×
×