Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Efekt przejścia

Założony przez  amurek123.

Witam !
Próbuję zrobić taki efekt przejścia jaki jest na grafinity.pl np. podczas najechania na przycisk Zarejestruj się.
Że jasna poświta wlatuje od boku do końca na button.
W internecie znalazłem jedynie to: http://www.kurshtmlcss.pl/kurs-css/lekcj...sition.php (pierwszy przykład) ale raczej to się nie nadaje.
Macie jakieś inne rozwiązania ? Bardzo proszę o pomoc.
Możesz zawsze animować po prostu background. Po najechaniu, więc js lub css (lepszy wybór).
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.
(21.05.2018, 17:04)Divir napisał(a): Możesz zawsze animować po prostu background. Po najechaniu, więc js lub css (lepszy wybór).
A mógłbyś bardziej mi wytłumaczyć jak to zrobić ?
https://css-tricks.com/zooming-background-images/ - oczywiście inne efekty, ale podobna mechanika i masz się na czym wzorować.

Na grafinity po prostu do buttona z rejestracją tworzą dzięki pseudoklasie :after dodatkowy element, który jest umiejscowiony (dzięki position) na tej samej pozycji co ten przycisk. nadają mu wysokość, background etc. i w hoverze po prostu nadają mu większe wymiary. Z początkowego scale(0) na scale(1) (z rozmiaru 0 na domyślny). Efekt cofania się jest uzyskany dzięki transition-timing-function, a konkretniej cubic-bezier. Funkcja, która pozwala ci zdefiniować jak będzie animacja wyglądać. Chrome posiada fajną oś w dev toolsach, którą możemy przeciągać i osiągać rózne fajne efekty, warto sprawdzić samemu.
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.



Użytkownicy przeglądający ten wątek:

2 gości