Animacja wejścia i jednoczesnego wyjścia ikony

Question

Witam. Chciałbym się dowiedzieć w jaki sposób zrobiono pewną animację. Szukam dłuższy czas i tylko znajduję efekt wejścia lub wyjścia ikony. Chodzi o najechanie na ikonę,wtedy ikona "ucieka" do góry i tak jakby była przyklejona do tej ikony druga pod spodem i wchodzi za nią inna. Przykład gdzie widziałem takie coś: https://www.sherweb.com/
Chodzi o te okrągłe ikony. Z góry dziękuję.

Comments

Tu lepszy sposób: https://tympanus.net/Development/IconHoverEffects/#set-5

Answer 1

https://codepen.io/zgrybus/pen/jGWONq
tak na szybko :)

Comments

Nie działało. Tak jak napisałem, wtedy był widoczny środek między 2 ikonami czyli pół jednej i pół drugiej. TranslateY na 100% powodowało przesunięcie się ikon tak, że po animacji nie były widoczne (ze zmianami na height i bez). Height zmieniłem na 200% metodą prób i błędów, po prostu wtedy to działało poprawnie. A możesz mi wytłumaczyć dlaczego dawanie 200% na height to nie najlepsze rozwiązanie?

---

Bo skoro rodzic ma 100px to czemu dziecko ma być większe od niego i mieć 200px? Jak dla mnie jest to błąd. Dziwne, że nie działa i przesuwa tak.

---

Chciałbym przypomnieć, że to jest 1 plik do wyświetlenia. Więc prawdopodobnie o to tu chodzi. 2 ikony w 1 pliku. 1 ikona ma 128px, więc razem mają 256px. Mam nadzieję, że dobrze to zrozumiałem jak to działa i wytłumaczyłem :P

---

A rodzic ile ma wysokości?

---

Nie jestem idealny jeszcze w terminologii, ale... Tak jak ustaliliśmy, okienko, w którym wyświetla się ikona ma wymiary 128x128. Tak jak wyżej pokazane, ikona jest pod ikoną, czyli rozmiar tego obrazka wynosi 128x256 (zgaduję, że to jest rodzic). Czyli dajemy znać, że wielkość całego obrazka to 200% okienka, w którym jest ikona widoczna i musi "podnieść" go o 50% (patrz translateY). Mam nadzieję, że dobrze wytłumaczyłem jak to rozumiem :D

Answer 2

W tym przypadku użyto takiego sprite-a https://images.sherweb.com/images/homepage/_products_sherweb.png

Na :hover zmienia się po prostu background-position, a żeby widać było animacje użyto transition.

To wszystko można znaleźć samemu korzystając z narzędzi developerskich (zbadaj element w większości przeglądarek).

Answer 3

ja zrobiłbym to tak , że utworzyłbym w 1 pliku wersje normalną a pod,nią wersje hover , następnie poprzez css zmieniał poprostu wartości i " przesuwał" obrazek w dół

Answer 4

Witam. Ta technika to "sprites css"