Tutorial - Stilvolle Präsentation von Bildern und dem Portfolio

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Stilvolle Präsentation von Bildern und dem Portfolio auf einer Website

Auf dieser Seite stelle ich ein paar Tutorials vor, die sich mit dem Thema der Präsentation seiner Bilder und seinem Portfolio beschäftigen. Und beim Schreiben dieser Tutorials habe ich selber noch vieles dazu gelernt und kam jedes Mal auf neue Ideen. Sobald mir etwas Neues für die Präsentation einfällt, werde ich es auf dieser Seite, mit dem Datum der Veröffentlichung, einstellen.

Wenn Sie Rückfragen zu einem Artikel haben schreiben Sie mich gerne an und ich versuche Ihnen bei der Umsetzung der Tutorials zu helfen.


Tutorial

30Sep2015

Der Ken Burns Effekt animiert Standbilder


Der Ken Burns Effekt vermittelt den Eindruck einer Schwenkbewegung mit einer Kamera, obwohl es sich um statische Bilder handelt und zeichnet sich durch langsam dahingleitende Bilder aus. Eine so gezeigte Diashow bleibt länger in der Erinnerung da durch die Bewegung der Bilder die Aufmerksamkeit des Betrachters erhöht wird. Auch leichte Vergrößerungs- oder Zoomeffekte um Details besser zu erkennen, bezeichnet man dabei als Ken Burns Effekt.

» Artikel über den Ken Burns Effekt weiterlesen
13Okt2016

Ein dreidimensionaler, rotierender Werbebanner für eine ausgefallene Werbung.


Es gibt viele Möglichkeiten eine Produktinformation wirkungsvoll zu zeigen. Hier erkläre ich, wie ich den Werbebanner von "Gonzalez Musica Latina" auf der Seite Musik als dreidimensionaler, rotierender oder rollender Würfel animiert habe, und das nur mit Hilfe von CSS3 (Cascading Style Sheet)-Deklarationen.

» Artikel über den rotierenden Werbebanner weiterlesen
16Nov2014

Accordion-Image-Slider mit CSS3-Transitionen.


Der Accordion-Image-Slider ist aus dem optimierten Accordion-Effekt aus dem Artikel Accordion-Effekt mit einer interessanten Optik entstanden, deren ausführliche Beschreibung man am Ende des genannten Artikels findet. Für den Accordion-Image-Slider müssen aber ein paar Dinge angepasst werden.

» Artikel über den Accordion-Image-Slider weiterlesen
07Nov2014

3D Slider mit CSS3-Transitionen und Keyframe-Animationen.


Die 3D Slider auf dieser Seite sind eine Weiterentwicklung der zweidimensionalen Cycle Slider. Auch hierzu gibt es im Internet bereits viele Beispiele, die aber fast alle mit JavaScript (objektorientierte Programmiersprache) und jQuery-Plugins realisiert wurden.

» Artikel über den 3D-Slider weiterlesen
28Sep2014

CSS3 Slider mit CSS3-Transitionen und Keyframe-Animationen.


Mit einem animierten Cycle Slider kann man sehr stilvoll seine Bilder oder sein Portfolio präsentieren. Im Internet gibt es bereits sehr viele unterschiedliche Arten von Slider, die zum Teil mit Hilfe von jQuery-Plugins oder JavaScript (objektorientierte Programmiersprache) animiert werden. Es stehen dabei viele Varianten der Navigation und Überblendungseffekte zur Auswahl. Aber Dank CSS3 (Cascading Style Sheet) kann man einen solchen Slider auch völlig ohne JavaScript (objektorientierte Programmiersprache) und nur mit CSS3 (Cascading Style Sheet)-Transitionen und Keyframe-Animationen realisieren.

» Artikel über den Slider weiterlesen
26Sep2014

Einfaches CSS3 mit 3D-Effekt und Bewegungsparallaxe.


Einen fantastischen 3D-Effekt erzeugt man durch eine Bewegungsparallaxe. Bei diesem Effekt bewegen sich manche Elemente, beim Überfahren eines Bildes mit dem Mauszeiger, langsamer als andere und damit entsteht beim Betrachten des Bildes ein Gefühl der Tiefe.

» Artikel über den 3D-Effekt weiterlesen
23Aug2014

CSS3-Keyframe-Animation mit verschiedenen Objekten


Bei diesem Beitrag werde ich einen animierten Gruß zu Ostern erstellen und möchte aufzeigen, wie man mit einfachen Mitteln eine lebendige und abwechslungsreiche Animation erstellt.

» Artikel über die CSS3-Keyframe-Animation weiterlesen
17Aug2014

Animierte Tag-Cloud oder Schlagwortwolke


Eine Schlagwortwolke ist eine Darstellung von wichtigen Worten die in einem Text oder wie hier auf einer Website vorkommen. Die wichtigsten Schlagwörter werden dabei durch eine größere oder dickere Schrift besonders hervorgehoben. Es gibt im Internet viele Generatoren für Tag-Clouds, Word Clouds oder Schlagwortwolken, aber ich werde mir selber eine Schlagwortwolke erstellen.

» Artikel über die Tag-Cloud weiterlesen
16Aug2014

CSS3-Animation mit mehreren Wolken vor einem Hintergrund mit Farbverlauf


So eine CSS3 (Cascading Style Sheet)-Animation wird mit @keyframes-Regeln erstellt. Eine Wolke, wie in diesem Beispiel, durchläuft in einer festgelegten Zeit verschiedene Zustände oder Schlüsselbilder, die sogenannten Keyframes. Jedem Bild können dabei unterschiedliche Eigenschaften, wie Größe oder Position, zugewiesen werden.

» Artikel über eine Wolkenanimation weiterlesen
03Aug2014

Hover-Effekte bei Bildern mit Überschriften und Begleittexten.


Im letzten Artikel hatte ich den Zusammenhang zwischen den beiden Elementen "figure" und "figcaption" in HTML5 (HyperText Markup Language) für Bilder und den zugehörigen Begleittext erklärt. Mit dem ":hover"-Element und 3D-Transformationen lassen sich nun interessante Effekte erzielen.

» Artikel über Hover-Effekte weiterlesen
10Mai2014

Die Lupe bleibt solange verborgen, bis Sie den Mauszeiger über ein Bild bewegen.


Mit Hilfe von jQuery habe ich einen Lupeneffekt umgesetzt und betrachte die Bilder durch ein Vergrößerungsglas. In Wirklichkeit wird eine große Version des Vorschaubildes geladen und nur dort angezeigt, wo sich gerade die Lupe befindet. Somit entsteht der Effekt, dass die Lupe das dargestellte Bild vergrößert.

» Artikel über den Lupeneffekt weiterlesen
17Okt2016

Große Diashow mit dem Fade-Effekt ohne JavaScript.


Funktioniert der Fade-Effekt auch bei einer größeren Diashow?
Aufbauend auf den vorherigen Artikel "Kleine Diashow mit dem Fade-Effekt ohne JavaScript" habe ich die Diashow auf dieser Seite mit 25 Bildern aufgebaut um die Performance zu testen und damit die Frage zu beantworten.

» Artikel über die große Diashow mit dem Fade-Effekt weiterlesen
17Okt2016

Kleine Diashow mit dem Fade-Effekt ohne JavaScript.


Ein Fade-Effekt für eine kleine Diashow ist mit CSS3 (Cascading Style Sheet) sehr einfach zu realisieren und sorgt für einen harmonischen und weichen Ablauf beim Überblenden von Elementen. Und der hier vorgestellte Effekt kommt dabei ganz ohne JavaScript (objektorientierte Programmiersprache) aus.

» Artikel über die Diashow mit dem Fade-Effekt weiterlesen
27Apr2014

Sanfte Überblendung von zwei Bildern mit dem Fade-Effekt.


Den sanften Wechsel zwischen zwei Bildern kann man sehr einfach mit der Eigenschaft ":hover" erreichen, während der Anwender mit dem Mauszeiger über ein Bild fährt.

» Artikel über das weiche Überblenden von zwei Bildern weiterlesen
21Apr2014

Ein von Hand geschriebener Brief per Animation.


Beim Schreiben des alten Briefes nehme ich eine Feder zur Hand. Aber leider trocknet die Tusche sehr schnell aus und beim Schreiben passieren mir leider so einige Fehler.

» Artikel über den handgeschriebenen Brief weiterlesen
19Apr2014

Ein Eselsohr zum Aufklappen.


Eine kreative Lösung um eine Werbung auf einer Webseite zu platzieren, ist ein Eselsohr zum Aufklappen, oft auch unter dem Namen "Pagepeel" oder "Sexy Curls" zu finden. Wie auf dieser Demonstrationsseite auch, wird das Eselsohr auf Webseiten meistens an der rechten, oberen Ecke eingeblendet.

» Artikel über das Eselsohr weiterlesen
14Apr2014

Diashow für beliebig viele Bilder mit einem JavaScript


Ich möchte eine Diashow oder auch Slideshow im Kopf einer Website automatisch ablaufen lassen. Hierbei sollen beliebig viele Bilder einer Fotogalerie eingebunden werden können und eine sanfte Überblendung zwischen den einzelnen Bildern stattfinden.
Die Diashow wird mit JavaScript (objektorientierte Programmiersprache) realisiert, wobei aber bei ausgeschaltetem JavaScript (objektorientierte Programmiersprache) das erste Bild angezeigt werden soll.

» Artikel über die Diashow weiterlesen
04Mär2014

Accordion-Effekt mit einer interessanten Optik


Der Accordion-Effekt ist eine mit JavaScript (objektorientierte Programmiersprache) umgesetzte Textanimation und wird auf Webseiten immer populärer und interessanter. Es kann zum Beispiel per Klick auf eine Überschrift ein ausführlicher Text ein- oder ausgeblendet werden.

» Artikel zum Accordion-Effekt weiterlesen

Zum Seitenanfang springen Λ