Jak stworzyć efekt przenikania w menu?


(Kpalka) #1

Szukam inspiracji do projektu nowej strony www i wpadł mi w oko ciekawy motyw menu na tej stronie www.ecocomfort.pl/strefa-specjalisty/rekuperatory/ Chodzi mi o menu główne, gdzie po najechaniu kursorem na kafelek pojawia się efekt przenikania. Ktoś wie jak coś takiego zrobić?


(Drobok) #2

Wkładasz obrazek pod dany element, a później zmieniasz jego przeźroczystość(opacity) za pomocą funkcji animate (jquery)


(narandill) #3

jQuery nie jest do tego potrzebne. Wystarczy pseudoslektor :hover w cssie.


(Drobok) #4

To weź teraz wytłumacz mi jak za pomocą w/w selektora zrobisz przejście z przykładu :stuck_out_tongue_winking_eye:


(Fizyda) #5

Bez problemu za pomocą transition…

EDIT:

Odpowiedź na pytanie:

przykładowy kod menu:

<ul class="main-menu">
    <li class="menu-item">Home</li>
    <li class="menu-item">Contact</li>
</ul>

CSS:

.menu-item {
    color: #cbcbcb;
    transition: color 1s, backgroud-image 1s;
}

.menu-item.current, .menu-item:hover {
    color: #cbffcb;
    background-image: url(adress/strzalka.png);
    background-position: 0 0; /* jeśli potrzeba */
}

 


(ttomas) #6

Fizyda pierwszy już miałem pisać… http://jsfiddle.net/djwave28/CuNkZ/2/


(Fizyda) #7

Nie ma sensu w tym przypadku robić tego na opacity, wystarczy transition na odpowiednie atrybuty - te które się zmieniają.


(ttomas) #8

Na szybko dałem pierwszy przykład :stuck_out_tongue:


(narandill) #9

chłopaki już wytłumaczyli :slight_smile: można oczywiście zrobić to jeszcze sprawniej. Im mniej JSa przy animacjach tego typu tym lepiej. Cssy wystarczają w zupełności do osiągnięcia często zdumiewających efektów.


(Drobok) #10

No tak, co kto lubi. Jeden woli prościej a drugi pisze dla wszystkich nie tylko dla tych z najnowszą przeglądarką :slight_smile:


(Fizyda) #11

W obecnej chwili to wygląda tak że jeśli jakiś efekt nie jest obsługiwany to prawdopodobnie nie ma sensu też tego robić w JS. Dlatego że może to być np stary telefon, słaby komputer. Więc po co robić animacje w JS i przeciążać stronę pod kątem skryptów jeśli user będzie miał problem z jej obsługa bo będzie ona strasznie długo się ładowała albo powolnie działała ze względu na dużą ilość działających w tle skryptów JS. JS lepiej zostawić do rzeczy bardziej potrzebnych i niezbędnych jak pobieranie danych czy aktualizacja.

Uważam, że lepiej by strona działała bez bajerów czyli animacji, ale działała i była wygodna w użytkowaniu. Często spotkać można strony ładne efektowne z masą animacji, ale strasznie toporne przez to. Często przegięcie jest już w samym formularzu filtrującym wyniki, co klik to Ci filtruje i “zawiesza” stronę i formularz, a można by poczekać aż user kliknie przycisk filtruj jak zaznaczy wszystkie kryteria. Szkoda jest na to i transferu i serwera tak naprawdę. Jeśli user chce określić 5 parametrów które mają być kryteriami wyszukiwania/wyświetlania to 4 razy bez sensu wyświetlane są wyniki które go nie interesują.

Jest to temat rzeka i nie ma słusznego wyboru, czasami warto jednak iść na kompromis. Osobiście wolę stronę mniej efektowną - bez animacji, ale płynnie działającą, gdy animacje zaczynają się wręcz zawieszać, albo jest ich za dużo można stracić mocno na usability.


(narandill) #12

Można zrobić dużo. Zgadzam się z przedmówcą. Może być ładnie i działać i na starych przeglądarkach i urządzeniach jak np iPad 1. Wbrew pozorom jest multum możliwości obejścia problemów z wydajnością.