Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

Ajax / Javascript Tutorial: AJAX Spiegeleffekt



Ranking: +4   Kommentare: 13   |   Bewertung: Keine Berechtigung!  

Vorwort:

Heue möchte ich euch erklären, wie ihr mithilfe einer AJAX Spiegelfunktion ein Spiegeleffekt erstellen könnt.
"Reflection.js allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean."

Schritt 1:

Ladet euch die zip Datei unter http://cow.neondragon.net/stuff/reflection/ herunter.
Die einzige Datei die wir brauchen ist Reflection.js.

Nun kopieren wir die Datei ins Stammverzeichnis und binden es im Headerbereich ein.
(zwischen <head> und </head>)

Code:


<script type="text/javascript" src="reflection.js"></script>




Schritt 2:
Jetzt fügen wir ein Bild ein.

Code:


<img src="einbild.jpg" alt="" />



Schritt 3:

Wenn das Bild gespiegelt werden soll dann müsst ihr einfach class="reflect" dazu schreiben.

Code:


<img src="einbild.jpg" class="reflect" alt="" />



Schritt 4:

Deckkraft ändern:

Code:


<img src="einbild.jpg" class="reflect ropacity33" alt="" />


ropacity ist die Deckkraft (1-100) in diesem Fall 33%

Höhe des Spiegelbildes ändern:

Code:


<img src="einbild.jpg" class="reflect rheight100 " alt="" />


Höhe (1-100) in diesem Fall 100%


Ordnerstruktur:
So sieht dann mein Verzeichnis aus:
-index.html
-reflection.js
-einbild.jpg

index.html:

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>AJAX Spiegeleffekt</title>



<script type="text/javascript" src="reflection.js"></script>

</head>



<body>



<img src="einbild.jpg" class="reflect ropacity33 rheight100" alt="" />

<!-- Deckkraft 33% Höhe 100% -->

</body>

</html>




Quellen: http://cow.neondragon.net/stuff/reflection/

Veröffentlicht von: mDC
Veröffentlicht am: 24 Dec. 2007
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: AJAX CSS Java Script mDC reflect Spiegeleffekt spiegeln tutorial xHTML


Themenverwandte Tutorials


Kommentar(e) (13)


phii sagt:

Zitat Nanobyte:

Zitat metsieder:

[..] und mit javascript brauchst den photoshop nicht jedesmal aufmachen ;)


Nicht sonderlich performant, und wozu den Server mit sowas belasten?
Einen Spiegeleffekt kann man aber auch mit PHP erzeugen!

Moonreflect[/Q UOTE]


6 Mar. 2012 15:44:54 • Antworten


GottZ sagt:

und was hat das nu mit ajax zu tun?
richtig.
garnix.

10 Dec. 2009 23:04:23 • Antworten


deleted_1305295226 sagt:

Zitat Crash:

Ich frage mich, wozu man dafür JavaScript braucht. Außerdem braucht man dort keinerlei AJAX.



Das AsynchrounusXmlAndJavascript JS schon beinhaltet und du dich damit quasi wiederholst ist dir schon klar oder?

18 Jul. 2009 18:58:45 • Antworten


moom sagt:

danke gutes tut. Daumen hoch

17 Jan. 2009 18:22:28 • Antworten


Crash sagt:

Wenn ich Bilder in Datenbanken speichere habe ich schon verloren. :-( Das ist irgendwie kein guter Grund.

9 Jan. 2008 18:11:35 • Antworten


ApocalypseT sagt:

Zitat Crash:

Ich frage mich, wozu man dafür JavaScript braucht. Außerdem braucht man dort keinerlei AJAX.


ganz einfach:weil man das dann dynamisch auch gerne mal auf 10 000 bilder in ner datenbank anwenden kann...wenn die ausgegebn werden berechnet einfach der client per js die Spiegelung.So wird der Server geschont und wir bekommen einen schönen bling-bling effekt mehr ;)
Ausserdem kann man das mit js auch mal einfach so testen (z.b. auf der startseite hier könnte man sowas anbringen)

8 Jan. 2008 11:29:58 • Antworten


Crash sagt:

Wäre schon, wenn diese Unzulänglichkeiten entfernt würden und du kurz erklärst wie das Prinzip dahinter funktioniert. Vll. möchte es ja jemand nachbauen?

27 Dec. 2007 23:24:38 • Antworten


mDC sagt:

Danke für die Bewertungen...


27 Dec. 2007 20:23:49 • Antworten


mDC sagt:

Zitat Marit:

ich habs mir nicht durchgelesen, aber der effekt sieht echt schick aus. kann man sicherlich gut benutzen.


danke


27 Dec. 2007 20:21:47 • Antworten


deleted_1355582138 sagt:

Zitat metsieder:

[..] und mit javascript brauchst den photoshop nicht jedesmal aufmachen ;)



Einen Spiegeleffekt kann man aber auch mit PHP erzeugen!

Moonreflect

27 Dec. 2007 02:32:56 • Antworten



Anfang

<<

1

2>>Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder