Kategorien
WordPress-Tipps

Verlinkte Textpassagen hervorheben – yellowfade-Script

Bei längeren Seiten / Beiträgen ist oft eine interne Verlinkung sinnvoll.
So werden die einzelnen Textabschnitte im oberen Bereich verlinkt mit sogenannten Textankern (Sprungmarken). [mehr Infos]

Klickt man auf solch einen Textanker gelangt man direkt zu dem Textabschnitt. Um diesen Abschnitt besser hervorzuheben wird der Bereich mit dem yellowfade-Script kurzzeitig farbig hervorgehoben. Gerade bei kürzen Absätzen eine gute Methode. Das Script stellt den Bereich zunächst gelb dar und wechselt sanft zum weißen Hintergrund. Sehr praktisch und optisch ansprechend.

Der Einbau ist schnell gemacht.

Einbau-Anleitung

Zunächst das Script herunterladen yellowFade.js und in den Theme Header einbauen.

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/yellowFade.js"></script>

 
Hinweis: Hier den Theme-Ordner verwenden in dem die Javascript Dateien liegen. Bei mir heisst der Ordner schlicht „js“.

Das war schon alles. Das Script erkennt automatisch Textanker.
Einfach zum Testen auf den obigen Beispiel Link klicken.

Hinweis: Ich verwende ein etwas modifiziertes Script

Spoiler

// Zeitinterval (in milliseconds) zum umschalten der Farbwerte
var FadeInterval = 600;

// Anzahl der Farbwerte
var StartFadeAt = 7;

// Abfolge der Farbwerte
var FadeSteps = new Array();
FadeSteps[1] = "ff";
FadeSteps[2] = "ee";
FadeSteps[3] = "dd";
FadeSteps[4] = "cc";
FadeSteps[5] = "bb";
FadeSteps[6] = "aa";
FadeSteps[7] = "99";

[collapse]

Ein besseres Beispiel findet man in meinem Bauen-Blog.

Damit man etwas eleganter und nicht so ruppig zum Textbereich gelangt empfiehlt sich ein Script zum soften Scrollen. Infos hierzu

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.