SCROLL-IN-Animation

Per Jquery-Script 'Animate-It'. Zu sehen insbesondere auf der Startseite index.html. Wie funktioniert es?

Elemente werden erst animiert, wenn diese durch Scrollen im Viewport sichtbar werden. Also erst wenn man in einen bestimmten Abschnitt hineinscrollt, wird die Animation für diesen Bereich ausgelöst. Probieren Sie diesen Profi-Effekt aus. Als Animationen stehen zur Verfügung: Einblenden oder Hineinrollen jeweils aus verschiedenen Richtungen, Shake (Schütteln) und viele andere.

Das Script ist ja schon in diesem Template in unserem Ordner 'js/plug-ins' installiert, so verweisen wir auf die entsprechende Stelle im Quellcode am Ende der HTML-Seite:
HTML
<link rel="stylesheet" href="js/plug-ins/animate-it/css/animations.css">
<script src="js/plug-ins/animate-it/js/css3-animate-it.js"></script>
Somit müssen Sie es nur noch über die gewählten CSS-Klassen des Anbieters ansprechen und auf ein beliebiges HTML-Element legen. Hier im nachfolgenden Beispiel gilt es für die h2-Überschrift, auf welcher der 'animated bounceIn-Effekt' gesetzt wurde, natürlich können Sie diesen Effekt auch auf andere HTML-Elemente legen:
HTML
<h2 class="animated bounceIn">It Works</h2>
Um dieses Element herum wurde dann noch dem Beispiel folgend ein' wrapper' mit der CSS-Klasse namens 'animatedParent' gelegt, wie folgt:
HTML
<div class="animatedParent">
<h2 class="animated bounceIn">It Works</h2>
</div>
Der Anbieter des 'Animate-It'-Scripts verwendet also im Beispiel die CSS-Klassen 'animatedParent', 'animated' und 'bounceIn'.

Statt des Effekts mit 'animated bounceIn', probieren Sie gerne die vielen nachstehenden Effekte:

animated bounceInDown
animated bounceInRight
animated bounceInUp
animated bounceInLeft
animated fadeIn
animated fadeInDown
animated fadeInUp
animated fadeInLeft
animated fadeRight
animated growIn
animated shake
animated rotateIn
animated rotateInUpLeft
animated rotateInDownLeft
animated rotateInUpRight
animated rotateInDownRight
animated rollIn
animated wiggle
animated shake
animated tada
animated swing
animated wobble
animated pulse

Ein Beispiel:
HTML
<div class="animatedParent">
<h2 class="animated tada">My Header Big</h2>
<h3 class="animated pulse">My Header Normal</h3>
<div class="animated rotateInUpLeft">Hier steht ein Text.</div>
</div>



Gallery Lightbox

Lightbox Picture Gallery

Nachstehend unsere Bilder-Gallerie. So funktioniert diese Foto-Schau: Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild X von Anzahl X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Es ist ein Jquery-Script.

Tolles Feature: Nachdem Sie ein Bild geklickt haben, fahren Sie mit der Maus über die rechte oder linke Fotohälfte des Bildes. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf dieses immer weiter zum nächsten bzw. vorangehendem Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Zum Schließen des Fenster klickt man auf das 'Schließen-Symbol' oder irgendwo ausserhalb des Fensters.


Gallery Media 01



Lightbox auf allen Fotos

Sie könnten das Lightbox-Script auch auf alle anderen Fotos, welche mit dem 'img-Tag' (und nicht als 'Hintergrund-Image') eingebaut sind, anwenden. Die entsprechenden Änderungen dazu sind nur in der HTML-Datei zu tätigen, denn das Script ist ja bereits eingebaut. Hier ist der Basis-Code als Beispiel:

Bild ohne Lightbox:
HTML
<img src="images/beispiel.jpg" width="900" height="500">
Bild mit Lightbox:
HTML
<a href="images/beispiel.jpg"
data-lightbox="gruppe1"
data-title="Ihre Bildunterschrift">
<img src="images/beispiel.jpg" width="900" height="500"></a>
Noch ein Hinweis: 'data-title' für eine Bildunterschrift ist optional und sollten Sie eine zweite Gallerie innerhalb der selben HTML-Datei aufmachen, so schreiben Sie bei der zweiten Gallerie dann bei 'data-lightbox' gruppe2 statt gruppe1.

Die Original-Lightbox

Hier einmal der Link zur originalen LIGHTBOX-GALLERY. Dort finden Sie bei Bedarf auch unter 'Options' noch verschiedene Möglichkeiten der Einstellung. Anhand der guten, weil einfachen Beispiele (Examples), erkennen Sie sehr schnell das Prinzip der Gallerie. Außerdem können Sie somit auch besser nachvollziehen, wie wir die Fotos bei unserer Gallerie responsive angelegt haben, denn diese responsive Anordnung ist ja nicht automatisch im genannten Script der Lightbox enthalten.


Lorem Ipsum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

 


Bilder & Icons

Bilder

Die Fotos in dieser Vorlage sind vom Foto-Anbieter PICJUMBO. Wir haben diese innerhalb unseres eigenen Grid-Systems responsive angelegt. Gerne können Sie natürlich auch Ihre eigenen Fotos verwenden.

Wir verwenden Icon-Fonts

Font-Icons sind sozusagen grafisch wirkende Schriftzeichen, die aber wie normaler Text behandelt werden (denn es sind ja Textzeichen) und damit eine schnellere und leichtere Formatierung gegenüber grafischen Icons per Bildformat (z.b. gif, jpg oder png) ermöglichen. Wir haben eine der beliebtesten Icon-Schriften in dieser Vorlage bereits anbei. Sie heißt "Fontawesome".

Font Awesome

Viele weitere Icons sind möglich, denn die sehr verbreitete Icon-Schrift vom Anbieter "FONTAWESOME" ist ja bereits in dieser Vorlage installiert. So fügen Sie ggfls. weitere Icons hinzu oder ersetzen die vorhandenen.

Die Dateien der Icon-Schrift sind also bereits diesem Template beigefügt mit dem großen Vorteil, das die Icons somit auch geladen und angezeigt werden, wenn keine Internet-Verbindung besteht.

Die Icon-Schrift kann aber statt dessen auch noch einfacher durch einen entsprechenden Link im Kopfbereich der Seite aufgerufen werden, die Schrift wird dann serverseitig geladen, sehen Sie hierzu die Erklärungen auf der Seite des Anbieters. Dies mag für manche der leichtere Weg sein, falls man ein Versions-Update aktualisieren möchte. Aber wie gesagt: Besteht keine Internet-Verbindung, so wird in diesem Fall auch kein Icon angezeigt.

Wir haben die Icons schon für Sie angepasst. Denn ohne weitere Bearbeitung sind die Font-Icons immer genauso groß und erscheinen in gleicher Farbe wie die aktuell verwendete Schrift für den Text.

Als Beispiel: