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

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

Efekt na logu

Założony przez  Lemo.

05.06.2018, 17:53
#1
Witam 
Chciałbym zrobić gdy podczas najechania kursorem na logo logo przybliżało się i lekko potrzasało się 
wiem że efekt taki da się osiągnąć\

Domena CS-420.PL
[Obrazek: https://cache.gametracker.com/server_inf...ED0C00.png]
05.06.2018, 18:00 (Ten post był ostatnio modyfikowany: 05.06.2018, 18:02 przez ThreeG.)
#2
Jeśli chodzi o sam sposób wykonania - jest to odpowiednia animacja wywoływana przez :hover, są już gotowe biblioteki z takimi animacjami np. ta https://elrumordelaluz.github.io/csshake/
Na stronie znajdziesz instrukcję jak użyć tej biblioteki.
05.06.2018, 18:05
#3
http://jsfiddle.net/5q7gx3sb/1/
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.
05.06.2018, 18:48 (Ten post był ostatnio modyfikowany: 05.06.2018, 18:48 przez Lemo.)
#4
(05.06.2018, 18:05)Divir napisał(a): http://jsfiddle.net/5q7gx3sb/1/
Co to?
gdzie to wkleic
[Obrazek: https://cache.gametracker.com/server_inf...ED0C00.png]
05.06.2018, 18:57
#5
CSS wklejasz do global.css (w trybie zaawansowanym), tylko musisz zmienić nazwę klasy page-logo na tą, którą ma logo na Twojej stronie, bo inaczej działać to nie będzie ;)
„Lecz biorę całą odpowiedzialność na siebie. Być może się pomyliłem. Ale przecież mylić się jest rzeczą ludzką.”
05.06.2018, 19:28
#6
niby jest ale coś się psuje i za barddzo do dołu schodzi
demo na CS-420.PL
[Obrazek: https://cache.gametracker.com/server_inf...ED0C00.png]
05.06.2018, 19:42
#7
Dzieje się tak ponieważ w klasie logo masz już ustawioną właściwość transform która jest nadpisywana przez animację, także najprościej będzie chyba w ten sposób
@keyframes pageLogo {
 from { transform: scale(1) rotate(4deg) translateY(-50%); }
 25% { transform: scale(1.05) rotate(-4deg) translateY(-50%); }
 50% { transform: scale(1.1) rotate(4deg) translateY(-50%); }
 75% { transform: scale(1.15) rotate(-4deg) translateY(-50%); }
 to { transform: scale(1) rotate(0) translateY(-50%); }
}
05.06.2018, 19:54
#8
U mnie dalej to samo
[Obrazek: https://cache.gametracker.com/server_inf...ED0C00.png]
05.06.2018, 20:14
#9
Bo dalej masz w logo.css to:
.logo {}.logo: hover {
    animation: Logo.5 s ease - in -out
}
@keyframes Logo {
    from {
        transform: scale(1) rotate(4 deg)
    }
    25 % {
        transform: scale(1.05) rotate(-4 deg)
    }
    50 % {
        transform: scale(1.1) rotate(4 deg)
    }
    75 % {
        transform: scale(1.15) rotate(-4 deg)
    }
    to {
        transform: scale(1) rotate(0)
    }
}
Zamiast tego:

.logo{}.logo:hover{animation:Logo .5s ease-in-out}
@keyframes Logo {
from { transform: scale(1) rotate(4deg) translateY(-50%); }
25% { transform: scale(1.05) rotate(-4deg) translateY(-50%); }
50% { transform: scale(1.1) rotate(4deg) translateY(-50%); }
75% { transform: scale(1.15) rotate(-4deg) translateY(-50%); }
to { transform: scale(1) rotate(0) translateY(-50%); }
}
„Lecz biorę całą odpowiedzialność na siebie. Być może się pomyliłem. Ale przecież mylić się jest rzeczą ludzką.”
05.06.2018, 20:49
#10
zrobiłem to i nadal to samo
[Obrazek: https://cache.gametracker.com/server_inf...ED0C00.png]
05.06.2018, 23:58
#11
Nie, już jest dobrze. Wyczyść sobie cache to zobaczysz (wciskasz Ctrl + F5) ;)
„Lecz biorę całą odpowiedzialność na siebie. Być może się pomyliłem. Ale przecież mylić się jest rzeczą ludzką.”



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

1 gości