Efekt odbicia grafiki w JS

Kategoria: Javascript, HTML i CSS



Elektryk
14 sierpień 2009 - 21:55
W tym poradniku zajmiemy się uzyskaniem naszej stronie efektu odbicia grafiki w podłożu. Efekt będzie generowany automatycznie w Java Script a zatem nie ma potrzeby przygotowywania odbitego zdjęcia w edytorze graficznym.

Gotowy efekt można podejrzeć tutaj. My będziemy dążyć do takiego samego wyglądu ale podamy inne wartości niż tam są.

Na początek musimy pobrać bibliotekę Raphaël z której będziemy korzystać. Robimy to klikając prawym przyciskiem myszy na poniższy link i wybierają "Zapisz jako..." lub podobnie brzmiącą opcje
http://github.com/Dm...min.js?raw=true

Teraz musimy skopiować pobrany plik do folderu z naszą stroną i dołączyć go do kodu za pomocą instrukcji:

<script src="raphael.js" type="text/javascript" charset="utf-8"></script>

Przyda nam się również dowolny obrazek. Gdy już go zdobędziemy możemy przystąpić do pisania kodu. Najpierw wstawimy naszą grafikę do strony.

<div id="fotka"> <img id="fotkaIMG" src="bd.png" width="320" height="240" alt="Test" /> </div>

Wymagane jest aby obrazek miał swoje unikatowe ID (w naszym przypadku fotkaIMG) i był umieszczony w swoim własnym divie który również ma mieć unikatowe ID (u nas jest to fotka). Gdy już mamy to załatwione przystępujemy do pisana krótkiego kodu w Java Script. Musimy go umieścić w specjalnych znacznikach w sekcji head by zapobiec przedwczesnemu wykonaniu się skryptu.

<script type="text/javascript"> window.onload = function () { // tu dalszy kod... }; </script>

Teraz gdy mamy pewność, że nasz skrypt zostanie wywołany dopiero gdy wszystkie elementy HTML zostaną wygenerowane zajmijmy się główną częścią kodu. Na początek ukryjmy oryginalne zdjęcie. Wymaga tego biblioteka której używamy.

var img = document.getElementById("fotkaIMG"); img.style.display = "none";

W powyższym kodzie dla wygody przypisaliśmy referencje naszego obrazka o ID fotkaIMG do zmiennej img a następnie wyłączyliśmy wyświetlanie tej grafiki. Utwórzmy teraz z naszego diva obiekt w którym biblioteka Raphaël będzie wyświetlać efekty.

var r = Raphael("fotka", 200, 350);

Jako argumenty podaliśmy kolejno ID diva którego chcemy przerobić na obiekt biblioteki oraz szerokość i wysokość nowo powstającego obiektu. W naszym przykładzie sama grafika ma rozmiary 200x200 pikseli. Do tego od spodu dodamy odbicie widoczne do trzech czwartych części obrazka a więc łączna wysokość będzie wynosiła 200+200*0.75=350 pikseli. Aby nie zgubić elementu zapisaliśmy jego referencje w zmiennej r.

Czas na wyświetlenie grafiki:

r.image(img.src, 0, 0, 200, 200);

W tym celu na naszym obiekcie wykonujemy funkcje image() podając jako jej argumenty adres do grafiki, pozycje w której ma się pojawić oraz jej docelowy rozmiar. Chcemy aby nasza grafika wyświetliła się dokładnie tam gdzie byłaby bez JS więc pozycje ustawiamy na dwa zera. W wysokość i szerokość wpisujemy natomiast 200 gdyż taką wielkość ma mieć główny obrazek na stronie.

Teraz przystąpmy do wygenerowania odbicia

r.image(img.src, 0, 200, 200, 200).scale(1, -1).attr({opacity: 0.5});

Tym razem na naszym divie wykonaliśmy więcej operacji. Omówmy je po kolei. Funkcje image już znamy. Tym razem jednak ustawiamy pozycję na 0 i 200 dzięki czemu odbicie wyświetli się dokładnie pod głównym obrazkiem (200 pikseli niżej czyli tyle ile ma obrazek). Rozmiary ponownie ustawiamy na 200x200 pamiętając jednak, że sam obiekt ma wysokość 350px a więc 50 px zostanie ucięte co da potem ładny efekt urwania odbicia. Kolejną wykorzystaną funkcją jest scale() dzięki której sprawiliśmy, że nasza grafika będzie odbita w osi X. Na koniec ustawiliśmy przeźroczystość grafiki na 0.5 przypisując atrybut opacity.

Na ten moment nasz efekt wygląda ... kijowo. Świetności doda mu odpowiedni gradient:

r.rect(0,200, 200, 150).attr({gradient: "90-#000-#000", opacity: 0.5});

Tym razem na naszym obiekcie malujemy prostokąt za pomocą funkcji rect() przekazując jej kolejno pozycje w obiekcie oraz rozmiary. Pozycja jest taka sama jak przy odbiciu gdyż tylko na nim ma być gradient. Rozmiary z kolei zostały ustawione 200x150 gdyż de facto takie będzie miał obrazek na stronie. Idąc dalej przypisujemy prostokątowi atrybut gradient. Podane mu wartości to kolejno kąt ustawienia gradientu (90 stopni) oraz kolor początkowy i końcowy gradientu (obydwa kolory to czarny zapisany w formacie szesnastkowym). Na koniec jeszcze raz dodajemy artybut opacity i nasz gradient jest gotowy tak jak zresztą cały efekt.

Pełny kod wygląda tak:

window.onload = function () { var img = document.getElementById("fotkaIMG"); img.style.display = "none"; var r = Raphael("fotka", 200, 350); r.image(img.src, 0, 0, 200, 200); r.image(img.src, 0, 200, 200, 200).scale(1, -1).attr({opacity: 0.5}); r.rect(0,200, 200, 150).attr({gradient: "90-#000-#000", opacity: 0.5}); };

I voila! Działa!
griwes
15 sierpień 2009 - 10:08
Fajne i proste. Ale chyba zauważyłem błąd ;)

<div id="fotka"> //...var r = Raphael("obraz", 200, 350); Mam wrażenie, że gdy div będzie miał id = fotka, a do Raphaela przekazujesz id = obraz, to to nie zadziała ;)

edit@down: np ;)
Elektryk
15 sierpień 2009 - 10:20
Faktycznie, skopiowałem sobie kod nie z tego pliku co chciałem, poprawiłem już, dzięki :)


Podobne tematy:
F1.09 - efekt działań ekspertów
Grafiki i eventy dla Grecji
Prośba do grafika...
DODane brygady-grafika prosba o pomoc;p
Efekt grafiki
Efekt grafiki