Skocz do zawartości

  • Zaloguj korzystając z Facebooka Zaloguj korzystając z Twittera Zaloguj przez Steam Zaloguj poprzez Google      Logowanie »   
  • Rejestracja

Witamy w Nieoficjalnym polskim support'cie AMX Mod X

Witamy w Nieoficjalnym polskim support'cie AMX Mod X, jak w większości społeczności internetowych musisz się zarejestrować aby móc odpowiadać lub zakładać nowe tematy, ale nie bój się to jest prosty proces w którym wymagamy minimalnych informacji.

  • Rozpoczynaj nowe tematy i odpowiedaj na inne
  • Zapisz się do tematów i for, aby otrzymywać automatyczne uaktualnienia
  • Dodawaj wydarzenia do kalendarza społecznościowego
  • Stwórz swój własny profil i zdobywaj nowych znajomych
  • Zdobywaj nowe doświadczenia

Dołączona grafika Dołączona grafika

Guest Message by DevFuse
 

Zdjęcie
IPB

Trzęsące się logo

ipb

  • Nie możesz napisać tematu
  • Zaloguj się, aby dodać odpowiedź
1 odpowiedź w tym temacie

#1 Sofcik

    Zaawansowany

  • Użytkownik

Reputacja: 9
Nowy

  • Postów:106
  • GG:
  • Imię:Łukasz
  • Lokalizacja:Zabrze / Rotterdam
Offline

Napisano 11.11.2015 17:08

Witam!

W dzisiejszym tutorialu pokażę Wam jak sprawić, by logo na naszej stronie się trzęsło.

A więc:

1. Wchodzimy w:

Wygląd>style i szablony>[Twój styl]>CSS>ipb_styles.css

i na samym dole tego szablonu wklejamy taki kodzik:

.buzz{
display:inline-block;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px rgba(0,0,0,0)
}

.buzz:hover,.buzz:focus,.buzz:active{
-webkit-animation-name:buzz;
animation-name:buzz;
-webkit-animation-duration:0.15s;
animation-duration:0.15s;
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite
}

@-webkit-keyframes buzz-out{
10%{
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}

20%{
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}

30%{
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}

40%{
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}

50%{
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}

60%{
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}

70%{
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}

80%{
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}

90%{
-webkit-transform:translateX(1px) rotate(0);
transform:translateX(1px) rotate(0)
}

100%{
-webkit-transform:translateX(-1px) rotate(0);
transform:translateX(-1px) rotate(0)
}

}

@keyframes buzz-out{
10%{
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}

20%{
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}

30%{
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}

40%{
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}

50%{
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}

60%{
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}

70%{
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}

80%{
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}

90%{
-webkit-transform:translateX(1px) rotate(0);
transform:translateX(1px) rotate(0)
}

100%{
-webkit-transform:translateX(-1px) rotate(0);
transform:translateX(-1px) rotate(0)
}

}

.buzz-out{
display:inline-block;
-webkit-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px rgba(0,0,0,0)
}

.buzz-out:hover,.buzz-out:focus,.buzz-out:active{
-webkit-animation-name:buzz-out;
animation-name:buzz-out;
-webkit-animation-duration:0.75s;
animation-duration:0.75s;
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
-webkit-animation-iteration-count:1;
animation-iteration-count:1
}
dodaj to gdzieś do css
do swojego stylu

i klikamy "zapisz"

2. Wchodzimy w:

Wygląd>style i szablony>[Twój styl]>szablony>DefaultHeader

i zamieniamy kod:

<a href='{$this->settings['board_url']}' class='textLogo' title='{$this->lang->words['go_home']}' rel="home" accesskey='1'>{$this->settings['board_name']}</a>

Na:

<a href='{$this->settings['board_url']}' title='{$this->lang->words['go_home']}' rel="home" accesskey='1'><img src='{parse replacement="logo_img"}' class='buzz-out' alt='{$this->lang->words['logo']}' /></a>

 

Gotowe! Możemy cieszyć się swoim trzęsącym się logo!:D


  • +
  • -
  • 0

1447472674_sofcikp.png


#2 adamus81

    Profesjonalista

  • Użytkownik

Reputacja: 2
Nowy

  • Postów:156
  • GG:
  • Imię:Adam
  • Lokalizacja:Konin
Offline

Napisano 07.01.2016 20:33

Mi to nie działa.


  • +
  • -
  • 0





Również z jednym lub większą ilością słów kluczowych: ipb

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych