Skocz do zawartości
PL
Szukaj na Pecetowiczu
Nowe Szukaj Zaloguj Dołącz
  • Utwórz konto

Kolorowe rangi i animowane ikony CSS

Kacper Komar •
Poradniki do IPS

Udostępnij
Przejdź do rekomendacji Rozwiązane przez SeNioR,
Rekomendowane odpowiedzi

Kacper Komar

Witam. Wie ktoś jak zrobić animowane, kolorowe rangi rainbow z poruszającą się ikoną przed nazwą grupy? Oczywiście pod Invision Community.

Wiem że to trzeba w HTML + JS ale nie wiem jaki kod dokładnie, pomoże ktoś?

Jak widać na obrazu niżej ikonka "młotek" jest animowana, rusza się a nazwa grupy ma taki błyszczący, świecący efekt. Jak mogę to osiągnąć?

image.png

Odnośnik do komentarza
Udostępnij na innych stronach

aXenDev

Cóż ikonka przed nazwą grupy to Font Awesome. Ten framework jest wbudowany w IPS więc wystarczy dodać kod ikonki w edycji grupy.

Odnośnik do komentarza
Udostępnij na innych stronach

Mativve

  • Mativve jest moderatorem

@Kacper Komar Wydaje mi się, że obędzie się bez JSa, jedynie modyfikacja HTMLu oraz CSSa

Tutaj znajdziesz poradnik (nie wiem czy działa tak samo jak na nowej wersji)

Rangi CSS wyświetlane jedynie w postach | IPS

Odnośnik do komentarza
Udostępnij na innych stronach

TruskaFFka

Jemu chodzi bardziej o taką rozsuwaną listę grup chyba. Był już o tym temat tutaj, ale nie mogę go znaleźć.

Odnośnik do komentarza
Udostępnij na innych stronach

Themeo Verified

Chyba bardziej mu chodzi o poświatę 😄 i te migające tło. 

<span style='background: url(tlowgifie); color: #kolor; text-shadow: 0px 1px 9px #kolor;'>Nazwa grupy</span>
Odnośnik do komentarza
Udostępnij na innych stronach

RafałS

jak chcesz support jakiś i pomoc przy forum to pisz pv, chętnie pomogę żeby odświeżyć sobie pamięć, bo już chyba z 6 lat mineło od mojego ostatniego projektu 🤣

Odnośnik do komentarza
Udostępnij na innych stronach

Kacper Komar

  • Autor
(edytowane)

Znaczy chodzi mi bardziej żeby ten młotek uderzał i ten technik tak się ruszał nie kręcił
@Krasnal@Mativve@TruskaFFka

Edytowane przez Kacper Komar
Odnośnik do komentarza
Udostępnij na innych stronach

Mativve

  • Mativve jest moderatorem

Są to odpowiednio zanimowane klasy ikon. Możesz skorzystać z gotowej paczki animacji:

https://animate.style/

Musiałbyś tylko podpiąć gdzieś ten styl CSS: https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css

lub go zalinkować gdzieś w motywie pomiędzy <head>[...]</head> dodając tam: 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

Potem ze strony wybierasz sobie nazwę animacji i dodajesz do klasy tej ikony.

Ewentualnie musisz samemu zrobić animacje korzystając z narzędzia: https://keyframes.app/ szukając na necie gotowców lub poczekać/poprosić kogoś o zrobienie specjalnie dla ciebie 😉

Odnośnik do komentarza
Udostępnij na innych stronach
  • Rekomendowana odpowiedź

SeNioR

  • Rekomendowana odpowiedź

Cześć Kacper.

Przejdź do ACP > Wygląd > Motywy > Twój motyw > Edytuj HTML i CSS > Zakładka CSS > custom > custom.css.

Wklej poniższy kod do szablonu "custom.css".

Jest to kod z użyciem właściwości "keyframes" która pozwala dodać animację. Ruch animacji został dopasowany do ruchu młotka czyli naszej ikonki przed nazwą grupy. 

 @keyframes wrench {
     0% {
         -webkit-transform: rotate(-12deg);
         transform: rotate(-12deg)
     }
     8% {
         -webkit-transform: rotate(12deg);
         transform: rotate(12deg)
     }
     10% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     18% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     20% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     28% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     30% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     38% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     40% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     48% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     50% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     58% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     60% {
         -webkit-transform: rotate(-24deg);
         transform: rotate(-24deg)
     }
     68% {
         -webkit-transform: rotate(24deg);
         transform: rotate(24deg)
     }
     100%,
     75% {
         -webkit-transform: rotate(0);
         transform: rotate(0)
     }
 }

 .faa-parent.animated-hover:hover>.faa-wrench,
 .faa-wrench.animated,
 .faa-wrench.animated-hover:hover {
     -webkit-animation: wrench 2.5s ease infinite;
     animation: wrench 2.5s ease infinite;
     transform-origin-x: 90%;
     transform-origin-y: 35%;
     transform-origin-z: initial
 }

Zapisz szablon i przejdź do Użytkownicy > Grupy > Edytuj grupę.

W polu "Prefiks formatowania" wklej 

<span style="color: #d369dc;font-weight:bold;text-shadow: 0px 1px 9px #d369dc;"><i class="fa fa-gavel faa-wrench animated" aria-hidden="true"></i>

a w drugim polu obok znacznik kończący czyli: 

</span>

Powinieneś uzyskać taki sam efekt jak na obrazku.

Odnośnik do komentarza
Udostępnij na innych stronach

Kacper Komar

  • Autor

@SeNioRPrawidłowo działa kod, dziękuje za pomoc. Właśnie o to mi chodziło. 
Temat do zamknięcia

Odnośnik do komentarza
Udostępnij na innych stronach

Kontynuuj dyskusję

Dołącz do Pecetowicza, aby kontynuować dyskusję w tym wątku.

Zaloguj się
Zarejestruj się
Zadaj pytanie bez logowania
  • Dodaj nową pozycję...
  • Dodaj nową pozycję...