GoldenLine
Zaloguj się
Andrzej Michałkiewicz

Andrzej Michałkiewicz

Temat: Jak uzyskać podobny efekt?

Hej, jeden z moich klientów pokazał mi stronę, która dla niego jest wyznacznikiem piękna:
http://www.akademiastylizacji.pl/#/pl
Strona zrobiona całkowicie we flashu. Czy jest możliwość osiągnięcia podobnych efektów dzięki jQuery? Szukałem jakiś plug-inów zdolnych generować podobne efekty, ale szczerze mówiąc nie wiem czy da się osiągnąć coś podobnego (szczególnie ważne jest to rozjeżdzanie się zdjęcia w poziome pasy podczas zmiany strony, bo podmiana zdjęcia co kilka sekund to nie problem).

Macie jakieś rozwiązania, które mogą pomóc zbliżyć się do tego efektu? Może slider z obrazem na całą szerokość ekranu? Z góry dzięki za wszelkie pomysły:)
Link do wypowiedziLink
Kamil Borkowski

Kamil Borkowski smartmage.pl -
Magento! sprytnie...

Temat: Jak uzyskać podobny efekt?

Efekt rozcinania widziałem na slajderze Nivo (http://nivo.dev7studios.com/), więc pewnie da się pociąć zdjęcie. A skoro się da to pewnie można sobie dopisać pozostałe efekty.
Link do wypowiedziLink
Mariusz Witek

Mariusz Witek Programista PHP,
Front-End Developer

Temat: Jak uzyskać podobny efekt?

Efekt rozcinania możesz bardzo łatwo uzyskać.
Tworzysz sobie kilka div-ów, następnie w każdym z nich jako tło ustawiasz zdjęcie, daje im taką samą wysokość i przesuwasz pozycję tła (background-position) o wysokość * numer diva. Potem tylko animujesz i po robocie.

Hmm, ale Ty potrzebujesz jeszcze skalowania tych części. Do tego już będziesz musiał pobawić się z <img i pozycjonowaniem absolutnym.
Możesz tak jak poprzednio stworzyć kilka div-ów, ustawić im na początek stałą szerokość i wysokość, w środku wstawić <img, div-om ustawić overflow: hidden; a obrazek wypozycjonować
Teraz animujesz, zmniejszając rozmiary div-a i obrazka.Mariusz Witek edytował(a) ten post dnia 03.06.11 o godzinie 09:51
Link do wypowiedziLink
Andrzej Michałkiewicz

Andrzej Michałkiewicz

Temat: Jak uzyskać podobny efekt?

Dzięki za odpowiedzi, znalazłem też slider, o którym troszkę zapomniałem, a którego już kilka razy używałem
http://workshop.rs/projects/coin-slider/
też ma fajne efekty rozbijania zdjęć.

Zastanawiam się tylko, jak duża jest szansa zbudowania całej strony na animowanym sliderze, jasne, że warstwy, tylko kwestia obsługi przez wszystkie przeglądarki.

Ale to muszę już sam sprawdzić tworząc animację na całą szerokość i wysokość strony, a potem spróbuję wrzucić kilka divów na górę i zobaczę jak to się sprawdzi.

Dzięki:)
Link do wypowiedziLink
Tomasz Zadora

Tomasz Zadora programuję

Temat: Jak uzyskać podobny efekt?

Można (dowolną animację) najpierw stworzyć w jakimś programie 3D, następnie wyrenderować i poszczególne klatki zrzucić do JPG/GIF, pociąć na kawałki wstawiane do divów i później już w jquery dokonać samej animacji.

W ten sposób można uzyskać praktycznie każdy efekt, ale raz że jest to pracochłonne, dwa - ciężkie w sensie ilości plików i kb.
Link do wypowiedziLink

konto usunięte

Temat: Jak uzyskać podobny efekt?

To co zaproponował Tomek na 100% nie zda egzaminu jeżeli będziesz chciał zrobić to na całej stronie.
Pamiętaj o tym że musisz mieć zdjęcia bardzo dobrej jakości które będą ważyły ok 0,5 MB. Robiłem niedawno taki prosty slider tła i uwierz mi że trochę to ważyło.
Link do wypowiedziLink
Tomasz Zadora

Tomasz Zadora programuję

Temat: Jak uzyskać podobny efekt?

Zależy co to jest, jak proste linie etc. to gify ważą mało, natomiast do zdjęć to faktycznie nie ma sensu - lepszy jest flash.
Link do wypowiedziLink
Andrzej Michałkiewicz

Andrzej Michałkiewicz

Temat: Jak uzyskać podobny efekt?

Jeszcze raz dzięki za odpowiedzi. Zrobiłem kilka demówek, żeby sprawdzić jak to się zachowa przy pełnym ekranie, ale szybkość działania już na lokalnej maszynie nie była zadowalająca przy porządnych zdjęciach. Na serwerze po załadowaniu 5 zdjęć dobrej jakości w tło animacja tnie i jest problem z doczytywaniem nowego obrazka. Po prostu to wszystko jest za duże. Raczej walka z jQuery w tym przypadku może nie być optymalnym rozwiązaniem. Tym bardziej, że skoki zaczynają się tylko przy animowanym tle strony i statycznych divach na górnej warstwie, a to dopiero początek początków animacji.

Cóż porozmawiam z klientem i zobaczę, co uda się wynegocjować:)
Link do wypowiedziLink
Adam Pawliczek

Adam Pawliczek Usability expert, UX
designer,
Interaction
specialist

Temat: Jak uzyskać podobny efekt?

Powiedz mu, że nawet jak będzie miał na stronie animację za 100 tys zł to i tak nic mu to nie da jak zawartość będzie do d. ;)
Przyznam szczerze, że ta animacja przy eksploracji strony zaczyna w pewnym momencie denerwować...
Link do wypowiedziLink
Michał Stachura

Michał Stachura Dedykowane serwisy i
strony www -
http://santri.eu

Temat: Jak uzyskać podobny efekt?

Strona faktycznie po jakimś czasie denerwuje. Nawet bardzo denerwuje.
Z drugiej strony trzeba zrozumieć klienta, któremu takie rozwiązanie wydaje się najlepsze na świecie.

Jeśli klient nie przyjmuje rozsądnych argumentów mówiących o słabości takiego podejścia do strony www, tobie nie udaje się go przekonać a i narzędzi uczciwych do tego nie ma... po prostu odpuść. Po co się męczyć nad czymś czego nie czujesz.

Ja bym za wszelką cenę przekonywał klienta, że tak prezentowana strona nie jest ani czytelna ani nie służy dobrze dla wizerunku firmy. Tak ze dwa razy bym pewnie spróbował przekonać, bo jak rozmawiasz z "betonem", który nie przyjmuje argumentów, a Ty w takie podejście nie wierzysz... odpuść :). Michał Stachura edytował(a) ten post dnia 11.06.11 o godzinie 23:20
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Potrzebny mi w jQuery efekt...




Wyślij zaproszenie do
Anuluj