Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Płynna zmiana rozmiaru tła pod zdjęciem (animacja)
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
MisiekPolarny
Witam,

Napisałem własną wersję galerii Lightbox, tylko że dużo prościej. Jednak brakuje mi tego efektu płynnego rozszerzania się pola, w którym potem pojawia się zdjęcie. U mnie przebiega to bez animacji i jest uzależnione tylko od prędkości wczytywania zdjęcia. Rozmiar obszaru pod zdjęciem dostosowuje się do rozmiaru załadowanego zdjęcia.

Jak zrobić taką animację jak w Lightboxie, żeby tło pod zdjęciem płynnie się rozszerzyło do rozmiarów zdjęcia, a dopiero potem pojawiło się zdjęcie? Macie jakieś wskazówki?

Korzystam z czystego Javascript bez dodatków, więc porady związane z JQuery raczej mi nie pomogą. Poza tym wolę spróbować samemu to zrobić, żeby moje dzieło było kompletne wink.gif

Myślałem o zapętlonej zmianie rozmiaru bloku DIV, ale przebiega to tak szybko, że nie widać efektu. Czym można spowolnić wykonywanie pętli? Próbowałem setTimeout'em, ale coś mi nie wychodzi. Czy to w ogóle właściwa droga?
melkorm
Dajesz na zdjęcie funkcję onload w które będzie dopiero wrzucał zdjęcie (wtedy pojawi się od razu) ale przed samym wrzuceniem pobierasz szerokość i wysokość zdjęcia i pętlą for sobie rozciągasz tego div'a wzdłuż i wszerz i po zakończonych pętlach jako source obrazka z kanałem alpha wrzucasz obrazek i masz ładny efekt tongue.gif

pseudocod:
Kod
// tutaj wrzucasz do div'a loadera
img.onload = function()
{
// tutaj pobierasz szerokość wysokość obrazka
// animacja, możesz też mieć div'a bez ustawionych parametrów szerokości / wysokości i wrzucić tam obrazek w tło - będzie ładniejszy efekt
// wrzucenie obrazka do div'a (chyba że uprzednio był w tle)
}
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.