Chukki.de » Tutorials

jQuery Tutorial: mitskalierende Hintergrundbilder

André — Mon, 03 May 2010 12:52:26 +0000

Flash ist nicht erst seit der Einführung von HTML5 und dessen neuem Videotag, welches h.264 abspielen kann auf dem absteigenden Ast. Flash ist properitär, die Suchmaschinen haben ihre Probleme, sehr Ressourcenfressend (zumindest auf dem Mac) und läuft zudem weder auf dem iPhone, noch auf dem iPad von Apple. Vorteil von Flash war immer das es sehr dynamisch ist und schöne Effekte kreiert werden können.

Doch diese Grenzen heben sich langsam dank jQuery und anderen Frameworks auf. Sie bringen viele Animationstechniken mit, die Scrollbare Inhalte, Farbübergänge oder ähnliches bewerkstelligen können. In einigen vorherigen Tutorials habe ich schon die jQuery Tools beschrieben und was für schöne Sachen man damit anstellen kann.

Eine schöner Effekt war bzw. ist das mitskalieren eines großen Hintergrundbildes, wie z.B. auf der Website der Deutschen Post. Dies passt sich automatisch der Browser- bzw. Auflösungsgröße des jeweiligen Users an. Zusätzlich ein paar schöne halb-transparente Text boxen und eine schöne Website ist fertig gestaltet.

Umsetzung

Doch wie macht man das? Eigentlich ganz einfach. Wir benötigen dafür jQuery (aktuell in Version 1.4.2) und fragen via Eventabfrage ab ob der User die Browsergröße verändert. Wenn dies geschieht, wird einem (möglichst gut aufgelöstem) Bild auf der Seite mitgeteilt das es seine größe verändern soll – und zwar auf die des Browser-Viewports.

Hört sich erst einmal ganz einfach an – und das ist es im Prinzip auch, soweit man natürlich schon etwas mit JavaScript bzw. jQuery gearbeitet hat.

CSS

body{margin:0px;}
#background{position:fixed; top:0; left:0; z-index:0;}
#ausgabe{background:black; padding:10px 15px; margin:10px; border:1px solid #cecece; color:white; opacity:0.8; position:absolute; top:140; z-index:10; font-size:12px; width:500px;}

HTML


     
     Ein Layer über dem Hintergrundbild

Wir legen eine kleine HTML Datei an, welche nur das Bild zur Skalierung und eine halbtransparente Ebene mit dem Content beinhält.

JavaScript

$(document).ready(function(){
    var width  = $(window).width();
    $("#background").width(width);
    $(window).resize(function(){
        width  = $(window).width();
        $("#background").width(width);
    });
})

Wenn das Dokument fertig geladen ist, wird die größe des Browser-Viewports an die Variable width weitergegeben und die ID Background (das Bild) in der Breite an das Fenster angepasst. Die höhe skaliert sich automatisch mit. Das gleiche soll natürlich auch passieren wenn sich die Fenstergröße ändert. Dafür fragen wir das Event resize in Verbindung mit dem Browserfenster (window) ab. Sollte sich hier etwas tun wird das Event ausgelöst und ebenfalls die Breite angepasst.

Also insgesamt ein leichtes diesen Effekt zu nutzen. Optimal z.B. für Seiten im Vintage Style.

Ähnliche Beiträge:

jQuery Tools – Teil 3: Scrollable

André — Mon, 05 Oct 2009 18:01:44 +0000

Nach einer einwöchigen Auszeit möchte ich euch heute gerne eine weitere Funktion aus den Reihen der jQuery Tools erläutern. Nachdem ich bereits die Tabs und die Tooltips etwas näher erläutert habe, werde ich heute die Scrollable Funktion erklären.

Was bedeutet Scrollable? Im Grunde ist es versteckter Content, der durch eine Scrollfunktion sichtbar gemacht wird. Optimale Einsatzgebiete dafür sind Bildergalerien oder Newsticker. So wird der Fokus auf ein Thema oder eine begrenzte Anzahl an Fotos gelegt – sollte einen User dies nicht für Interessant halten, kann er mit einem klick andere Themen und Bilder sichtbar machen. Insgesamt eine sehr schöne und imposante Funktion, welche den Content auf Seiten deutlich lebendiger werden lässt.

Impressionen

Da man diese Funktion mit Bildern nur schlecht präsentieren kann, erläutere ich in diesem Fall nur anhand von Beispielen den Einsatz.

Coda
Optimal nutzt wieder einmal Panic’s Coda diese Funktion. Coda hat die eigene Seite in 7 Bereiche aufgeteilt, welche alle Informationen zu der Software abdecken. Möchte man nun Wissen wie der Editor funktioniert, klickt man auf den Menüpunkt und der Inhalt “rutscht” von rechts nach Links in den Fokus. Also alle Informationen schnell an der Hand ohne die Seite neu laden zu müssen.

Chukki.de
Auf Chukki.de wird diese Funktion ebenfalls im Kopfbereich genutzt. Als Vorschau für den Wordpress Theme Download habe ich einige Bilder hinterlegt welche abwechselnd dargestellt werden.

jQuery Tools Example
Im Beispielbereich der jQuery Tools ist ein Anmeldungs Formular mit mehreren schritten, welche Step-by-Step abgearbeitet werden, erläutert. Hier wird im ersten Schritt der Benutzername eingegeben und wenn alle Informationen ausgefüllt sind kann zum nächsten Schritt “gerutscht” werden bis die Anmeldung abgeschlossen ist.

Erläuterung

Natürlich ist wieder die jQuery Tools Library nötig um folgendes Script zu verwenden. Der Download ist nach wie vor auf der jQuery Tools Seite zu finden

JavaScript

Dieses Stück Quelltext besagt das auf den Div Container mit der Klasse “scrollable” die Funktion Scrollable ohne jegliche weiteren Parameter angewendet werden soll. Das ist es im groben auch schon was man dafür brauch. Aber auch hier bieten die jQuery Tools viele viele Parameter mit denen man die Funktion weiter anpassen kann.

So kann man mit “size” die Größe der Schritte angeben, mit “vertical” ob das Scrollen statt horizontal vertikal ausgeführt werden soll und mit “items” welche Klasse die Bilder oder Texte beinhalten soll. Dies kann z.B. so aussehen:

Diese Parameter verändern das Scrollable dahin das nur 1 Bild weiter gescrollt wird, dabei aber Vertikal anstatt Horizontal und das wenn das letzte Element erreicht ist, wieder vorne begonnen werden soll.

Was brauchen wir an HTML und CSS um das ganze zu realisieren?

HTML

CSS

div.scrollable {
    position:relative;
    overflow:hidden;
    width: 660px;
    height:90px;
}
div.scrollable div.items {
    width:20000em;
    position:absolute;
}

Dieser CSS Code sagt das alles was in der Scrollable Klasse überhängt abgeschnitten werden soll. Die Items werden absolut positioniert und haben eine riesige Breite damit der komplette Inhalt nebeneinander dargestellt werden kann. Dadurch das Scrollable auf eine Breite von 660px begrenzt ist, gibt es hier keine Darstellungsprobleme.

Alles weitere an Feintuning entnehmt ihr wie immer der jQuery Tools Seite oder einem Beitrag auf noupe.com, welche ebenfalls die Funktionen sehr gut erläutert. Bei Fragen einfach ein Kommentar schreiben oder mich über Twitter kontaktieren.

Ähnliche Beiträge:

404 – Error Reporting in Wordpress

André — Fri, 28 Aug 2009 13:44:43 +0000

404 Fehler auf Websites sind immer unschön, doch was tun wenn doch mal so ein Fehler auftritt. Ganz einfach: Wordpress bietet entweder eine Datei, die auf den Namen 404.php hört oder alternativ einen “else” zweig in den Theme Dateien, welcher genutzt wird sobald die gesuchte Seite nicht verfügbar ist.

Der unterschied zwischen beiden Varianten liegt darin ob man die “Permalink-Struktur” angepasst hat. Sollte dies der Fall sein, wird die 404.php genutzt. Wenn aber die Seiten ID’s benutzt werden, wird der “else” Zweig innerhalb der Theme Dateien single.php, index.php und page.php für das error Reporting verwendet. Für beide Varianten stell ich nun eine Funktion vor, um eine E-Mail zu versenden wenn so ein Fehler auftritt. Natürlich kann die Funktion selbst auch für andere Projekte genutzt werden, aber ich beschreibe das ganze etwas vereinfacht für Wordpress.

404.php Variante

Damit die 404.php Datei genutzt wird muss die Permalink Struktur angepasst werden. Das geschieht im Wordpress Adminbereich unter Einstellungen -> Permalinks und hat den Vorteil, das die Page-ID’s in schöne, lesbare URLs umgeschrieben werden. Google und weitere Suchmaschinen legen viel wert auf eine gute Linkstruktur und deshalb dienen die Permalinks auch zur Suchmaschinenoptimierung.

Nun kommen wir zur eigentlichen Funktion. Die Datei 404.php muss im Theme Ordner liegen und natürlich die nötigen Funktionen beinhalten, welche jedes Theme benötigt. Im Normalfall sollte der Aufbau ungefähr so aussehen:

404.php

Damit werden die Dateien header.php, sidebar.php und footer.php eingebunden – soweit sollte aber jeder, der schonmal ein Wordpress Theme gemacht hat selber kommen. Desweiteren wird natürlich ein Ausgabetext benötigt damit dem User sichtbar gemacht wird, das die Seite nicht verfügbar ist.

404.php


    
        404 - Die Seite wurde nicht gefunden
        Die gesuchte Seite ist leider nicht auffindbar, bitte versuch es mit einer anderen!

Dem User wird eine Fehlermeldung ausgegeben, dass die gesuchte Seite nicht verfügbar ist. Erweitert werden kann dies unter anderem durch ein Suchfeld oder aber auch ein Verweis auf eine Sitemap. Um nun ein error Reporting zu erstellen und per Mail zu verschicken benötigen wir folgende Funktion:

functions.php

 \r\n";
	$ip = getenv ("REMOTE_ADDR"); // IP Adresse des Besuchers
	$server = getenv("SERVER_NAME"); // Seiten URL
  	$uri = getenv("REQUEST_URI"); // Angeforderte URL
	$referer = getenv("HTTP_REFERER"); // Von welcher Website der User gekommen um evtl. Verlinkungsfehler zu finden
	$agent = getenv("HTTP_USER_AGENT"); // Browser- bzw. Renderingversion
	$date = date("D M j Y g:i:s a T"); // Zeitstempel
	$message = "404 - Eine Seite nicht gefunden werden".
	"\n
----------------------------------------------------------------------".
	"\n
Datum: ".$date.
	"\n
User IP: ".$ip.
	"\n
Fehler Seite: http://".$server.$uri.
	"\n
Referer: ".$referer.
	"\n
User Agent: ".$agent;
	mail($send_to,"[".$from."] - 404 Error", $message, $header); // Versand der Mail mit allen Informationen
}
?>

Dieser Code muss in die functions.php geschrieben oder kopiert werden – diese liegt ebenfalls im Theme Ordner. Geändert werden müssen nur die ersten zwei Zeilen, welche angeben wohin die Mail verschickt werden soll und unter welcher URL der Website läuft.

Um die 404.php abschliessend zu komplettieren muss die Funktion noch eingefügt werden. Das sieht dann folgendermaßen aus:

404.php


    
        404 - Die Seite wurde nicht gefunden
         Die gesuchte Seite ist leider nicht auffindbar, bitte versuch es mit einer anderen!

Else Variante

Sollte der Fall eintreten das man die Variante mit der Page-ID nutzt, kann die gleiche Funktion genutzt werden. Nur anstatt einer 404.php nutzen wir die single.php, index.php und page.php.
Hierfür muss auch wieder der Grundaufbau geleistet werden – ich zeige das anhand der index.php

index.php

Damit haben wir den Grundaufbau geleistet… mit der while-Schleife werden die Beiträge – sofern vorhanden – angezeigt und die Überschrift verlinkt. Um auch hier das error Reporting zu aktivieren muss die Funktion, welche wir oben geschrieben haben in dem “Else” Teil der Abfrage “if(have_posts())“.

index.php

Eigentlich ziemlich einfach, aber sehr effektiv – jedes mal wenn nun eine Seite nicht gefunden wird, bekommen wir eine E-Mail mit den wichtigsten Daten zugeschickt. Mit dieser Mail kann man entscheiden, ob es sich um einen Eingabefehler handelt oder ob irgendwo eine fehlerhafte Verlinkung vorhanden ist.

Das Ergebnis:

Ähnliche Beiträge:

Technicolor Tutorial

Stephi — Fri, 14 Aug 2009 13:14:26 +0000

Der Technicolor ist einer der ersten Farbfilme die auf den Markt kamen und seine Ergebnisse sind heute, im Zeitalter der Digitalfotografie, kaum noch bekannt aber dennoch sehr schön! Es gibt mehrere Verfahren von Technicolor, eins davon funktioniert mit Aufnahme und Wiedergabe zweier Farbfilter. Dieses Verfahren ist auch digital umsetzbar.

Zunächst wird ein Bild geöffnet und zum Beispiel durch Tonwertkorrekturen und Gradationskurven korrigiert. Da dies in den Meisten Fällen über Einstellungsebenen vorgenommen wird, werden die Ebenen anschließend zusammengefügt, damit mit einer Ebene gearbeitet werden kann (wichtiges Shortcut, um die darunterliegenen Ebenen zuerhalten: shift + alt + cmd + E).

Fotofilter

Nun werden zwei Einstellungsebenen Fotofilter hinzugefügt. Zum Einen Cyan (100%) und zum anderen Magenta (100%). Das sind die Filter die anschließend mit dem Original verrechnet werden. Anschließend wird jede Fotofilter-Ebende mit dem Original auf jeweils eine Ebene zusammengefügt – daher sollte der oben genannte Shortcut verwendet werden, da dieser die darunetrliegenen Ebenen immer erhält, sodass zwei neue Ebenen entstehen, wobei eine das Original mit dem Cyan-Filter und die andere das Original mit dem Magentafilter zeigt.

Die beiden mit den jeweiligen Fotofiltern zusammengefügten Ebenen sind die, mit denen im weiteren Verlauf gearbeitet wird. Dabei sollte die Cyan-Ebene direkt unter der Magenta-Ebene liegen (zum Experimentieren auch andersherum möglich), die anderen Ebenen können deaktiviert werden. Die Magenta-Ebene wird den auf Modus “Inneinanderkopieren” gesetzt und die beiden Ebenen werden zu einer zusammengefügt.

Einstellungen über Einstellungsebenen

Über die Einstellungsebenen werden weitere Anpassungen vorgenommen. Zunächst wird die Einstllungsebene Farbton/Sättigung angewählt. Der Farbton bleibt gleich, die Sättigung wird um 44 verringert und die Helligkeit um 5 erhöht (also 0/-44/+5). Danach werden die Gradationskurven angepasst. Hierbei werden Rot und Grün angehoben und Blau abgesenkt (siehe Abbildungen). Anschließend wird die Einstellungsebene Kanalmixer gewählt. Dem Ausgabekanal Rot wird zu seinen 100% Rot noch 5% Grün hinzugefügt, Grün bleibt unverändert und der Ausgabekanal Blau wird um 5% Blau reduziert.

Letzte Schritte

Nach den Anpassungen über die Einstellungsebenen, werden die Ebenen wieder zu einer zusammengefügt. Jetzt sollten die darunterliegenden Ebenen nicht deaktiviert werden! Die zusammengefügte Ebene wird über den Gaußschen Weichzeichner weichgezeichnet. Die Intensität ist variabel - je stärker, desto unklarer werden die Konturen. Der Ebenenmodus “Inneinanderkopieren” wird für diese Ebene gewählt und die Deckkraft wird auf 50% gesetzt. Diese Ebene wird dupliziert (Apfel + j), auf den Modus “Multiplizieren” gestzt und die Deckkraft wird auf 30% verringert- Fertig.

Das Ergebnis ist oftmals abhängig vom Ausgangsmaterial, also ist es normal dass oftmlas recht unterschiedliche Ergebnisse entstehen. Viel Spaß mit diesem Tutorial :)

Ähnliche Beiträge:

Vorschau auf Photoshop CS 4

Mootools Link Animation

André — Sat, 14 Feb 2009 13:48:15 +0000

Der normale Hover Effekt durch CSS reicht vielen aus, wer es jedoch etwas hübscher haben möchte, kann Mootools zur Hilfe nehmen. Durch ein paar Zeilen Code wird aus den 2 Zuständen (Normal & Hover) eine Animation gebildet. Dies ist ganz nützlich um ein wenig “Ambiente” in die Seite zu bringen und sie etwas dynamischer wirken zu lassen.

Dazu nutzen wir die Mootools Funktion tween, welche einen Überlauf zwischen zwei CSS Eigenschaften zulässt.

$$('a').each(function(link){
    var hover_color = link.getStyle('color');
    link.addEvents({
        'mouseenter': function (){ this.tween('color', '#fa8749'); },
        'mouseleave': function (){ this.tween('color', hover_color); }
    });
});

Wir nehmen den DOM Selektor ($$) und weisen ihm a (alle Links) zu. Durch die Funktion each wird mitgeteilt das jeder Link durch die folgenden Zeilen Code beeinflusst werden soll. In der Variable hover_color speichern wir die Ausgangsfarbe des Links um nach dem hover wieder die Ursprungsfarbe herzustellen.

Die beiden Events mouseenter und mouseleave führen die Animation anschliessend aus.

Damit ist es schon getan. 7 Zeilen Code um eine kleine Animation zu zaubern. In der Demo bzw. beim Download habe ich zusätzlich mit einer Klasse gearbeitet, um den Unterschied zwischen dem normalen hover und dem animierten, innerhalb einer Datei besser ersichtlich zu machen. Dafür habe ich einfach den Selektor (oben a – Alle Links) durch eine CSS Klasse ersetzt.

Ähnliche Beiträge:

Tabs mit Mootools

André — Sun, 08 Feb 2009 19:54:05 +0000

Nach ein paar schönen Tagen im Bayrischen Oberstdorf, stell ich euch nun das nächste Tutorial bereit. Diesmal handelt es sich um eine simple Tab-Navigation mittels Mootools.
Tabs sind im Trend… moderne Browser nutzen sie, Photoshop CS4 nutzt sie und auch viele Websites sind mit dieser platzsparenden Art der Contentverwaltung ausgestattet.

Sicherlich mag es mehrere Wege geben wie man diese Funktion umsetzten kann. Ich werde euch den Weg aufzeigen, welchen ich bisher immer genutzt habe. Für weitere, eventuell auch leichtere und bessere Umsetzungen würde ich mich über ein Kommentar freuen.

Die Grundlage

Die Grundlage ist mal wieder Mootools 1.21. Diese muss natürlich im Header eingebunden werden, damit das Framework seine Tat vollziehen kann.

Javascript

Sobald die Seite fertig geladen ist, soll die Klasse .tab mittels CSS versteckt werden (display:none). Die ID #tab_1 soll jedoch erscheinen. Damit ist das erste Tab beim laden aktiv. Ich habe nun 3 Tabs angelegt und damit auch 3 Toggler (Schalter). Beim Klick auf die Toggler 1-3 wird ein Event ausgeführt, welches alle Tabs wieder versteckt und nur den Inhalt des jeweiligen angeklickten Tab anzeigt. Das wiederhole ich für alle Tabs. Sollten mehr Tabs gewünscht sein, müssen noch mehr Events hinzugefügt werden; natürlich mit fortlaufender Zahl beim Toggler und Tab.

window.addEvent('domready', function() {

	$$('.tab').setStyle('display', 'none');

        $('tab_1').setStyle('display', 'block');
        $('toggler_1').addEvent('click', function(a){

            $$('.tab').setStyle('display', 'none');

            $('tab_1').setStyle('display', 'block');

        });

        $('toggler_2').addEvent('click', function(b){

            $$('.tab').setStyle('display', 'none');

            $('tab_2').setStyle('display', 'block');

        });

        $('toggler_3').addEvent('click', function(c){

            $$('.tab').setStyle('display', 'none');

            $('tab_3').setStyle('display', 'block');

        });

    });

HTML

Der HTML Code ist ziemlich einfach. Erst ein paar Links als Toggler für die verschiedenen Tabs und darunter in den div Containern den Content der Tabs.

Das sind die News!

Und das die Kommentare...

Hier kannst du suchen...

CSS

Nun machen wir das Ganze noch ein klein wenig hübscher. CSS sei dank ist das ziemlich leicht zu bewerkstelligen. Ich lege in diesem Fall die Links alle durch display:inline nebeneinander, entferne den Listenpunkt und spiele ein wenig mit den Farben und Abständen.

ul li{

    display:inline;

    list-item:none;

    border:1px solid #444444;

    background-color:#cccccc;

    padding:2px;

    margin:1px;

}

Zum Schluss

Die Tabs können natürlich mit allem Möglichen gefüttert werden. Das kann z.B. ein Suchfeld sein, eine MySQL Abfrage zur Ausgabe der News mit PHP oder aber eben auch die letzten Kommentare von Wordpress als Widget.

Ähnliche Beiträge:

Fading Opacity mit Mootools

André — Thu, 18 Dec 2008 16:16:47 +0000

…oder auf Deutsch gesagt: Die Deckkraft von Bildern mit einem schönen Übergang verändern.

Sicherlich ist es möglich die Deckkraft einfach per CSS zu verändern und bei “:hover” dann die volle Deckkraft zu nutzen. Ich erkläre jedoch den Vorgang in zusammenarbeit mit dem JavaScript Framework Mootools, welches viele schöne Effekte mit sich bringt und somit ein fließender Übergang zwischen den beiden Stufen der Deckkraft möglich ist.

Als erstes benötigen wird dafür die Javascript Dateien von Mootools, welche es hier zum Download gibt.

Die Datei wird in den Quelltext eingebunden. Dazu wird unter “src” der Pfad zur .js Datei angegeben.

Wenn die Grafik mit der Maus markiert wird soll Sie voll sichtbar sein, deswegen der Wert 1 bei fade_in. Wenn die Maus die Grafik wieder verlässt soll sie wieder leicht die Deckkraft verlieren, wofür der Wert 0.5 bei fade_out steht

Im "body" wird dem Browser mitgeteilt das er beim laden der Seite alle Bilder eine Deckkraft von 0.5 geben soll. Sollten nicht alle Bilder diese Deckkraft bekommen, wird anstatt "img" die für die Bilder genutzte CSS Klasse oder ID genutzt.

Der dritte und letzte Schritt wendet die Funktion auf die Bilder an. Dafür werden die Javascript Events onmouseover und unmouseout genutzt.

Die beiden Events lösen jeweils eine Funktion aus. In diesem Fall ist es "this.fade". Beim MouseOver wird, wie oben beschrieben, der Wert von "fade_in" genutzt und beim MouseOut der Wert von "fade_out". Durch die angabe von "this" vor dem "fade bezieht sich die Funktion nur auf sich selbst, also in diesem Fall das Bild.

So entsteht ziemlich schnell ein schöner Effekt für Bilder, welche nicht durchgehend angezeigt werden sollen oder als Link fungieren sollen.

// Update - Ein weiterer Vorschlag von Johannes, welcher den JavaScript Code vom HTML trennt:

window.addEvent(’domready’, function(){

    $$(’img’).each(function(img){

         img.set(’opacity’, 0.5).addEvents({

            ‘mouseover’: function(){

                 this.fade(1);

             },

            ‘mouseout’: function(){

                 this.fade(0.5);

             }

        });

    });

});

Ähnliche Beiträge: