gbReflection v1.0

Mit gbReflection können Sie Bilder spiegeln. Eine Bildbearbeitung für die Spiegelung eines Bildes ist somit überflüssig. Mit einen Reflexion-Effekt werten Sie das Erscheinungsbild Ihrer Webseite erheblich auf.

Demo

» gbReflection Demo herunterladen

Einbinden

1. Laden Sie die benötigt Daten » hier herunter.
2. Binden Sie die JavaScript Dateien in Ihrer Seite ein.
   <script type="text/javascript" src="moo1.2.js"></script>
<script type="text/javascript" src="gbreflection.js"></script>
3. Vergeben Sie allen Bildern einen Klassennamen (z.B. class="gbreflection")
4. Sie können der Klasse noch Optionen (optional) zuweisen, die der Klasse übergeben werden soll.
   <script type="text/javascript">
var gbReflectionOpt = {
handler : 'gbreflection',
reflectionHeight : 0.2,
reflectionOpacity : 0.2,
reflectionPosition : 0.2
}
</script>
5. Die JavaScript Klasse wird automatisch aufgerufen, wenn die Webseite vollständig geladen ist.
6. Das Aussehen können Sie per CSS verändern.
   <style type="text/css">
.gbreflection {
padding: 2px 2px 8px 2px;
border: 2px solid black;
border-left-color: #bababa;
border-top-color: #bababa;
}
.gbreflection_master {
padding-bottom: 2px;
border-bottom: 2px solid #ff4e00;
}
.canvas {
margin-top: 2px;
}
</style>

Erläuterung

• handler
  Geben Sie hier den Klassennamen an, den Sie für die Bilder vergeben haben.
• reflectionHeight
  Hier können Sie die Höhe der Spiegelung einstellen. Vergeben Sie hier für die Reflexionshöhe einen Wert zwischen 0.0 und 1.0.
  Z.B. 0.2
• reflectionOpacity
  Dieser Wert stellt die Transparenz der Spiegelung ein. Vergeben Sie hier für die Deckkraft der Reflexion einen Wert zwischen 0.0 und 1.0.
  Z.B. 0.2
• reflectionPosition
  Dieser Wert stellt den Verlauf der Spiegelung ein. Vergeben Sie hier für die Position der Reflexion einen Wert zwischen 0.0 und 1.0.
  Z.B. 0.2

Hinweis

Mit CSS 3 lässt sich sehr einfach eine Reflexion verwirklichen ohne JavaScript nutzen zu müssen. Allerdings können das im Moment nur Webkit Browser wie Chrome oder Safari. Die folgende CSS 3 Anweisung können Sie verwenden:

<style type="text/css">
/* Webkit (Safari, Chrome) */
img {
-webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.8, transparent), to(#fff));
}
</style>

Ein Anwendungsbeispiel zeigt Ihnen gbTrigo.

« Zurück