Webboard

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).

(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.