Jump to content

Search the Community

Showing results for tags 'buzzz/move'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Help Support
    • Announcement And Help
    • Funday Chatroom
  • Poetry
    • Shair o Shairy
    • Famous Poet
  • Islam - اسلام
    • QURAN O TARJUMA قرآن و ترجمہ
    • AHADEES MUBARIK آحدیث مبارک
    • Ramazan ul Mubarik - رمضان المبارک
    • Deen O Duniya - دین و دنیا
  • Other Forums
    • Quizzes
    • Movies and Stars
    • Chit chat And Greetings
    • Urdu Adab
    • Entertainment
    • Common Rooms
  • Science, Arts & Culture
    • Education, Science & Technology
  • IPS Community Suite
    • IPS Community Suite 4.1
    • IPS Download
    • IPS Community Help/Support And Tutorials

Blogs

There are no results to display.

There are no results to display.

Categories

  • IPS Community Suite 4.4
    • Applications 4.4
    • Plugin 4.4
    • Themes/Ranks
    • IPS Languages 4.4
  • IPS Community Suite 4.3
    • Applications 4.3
    • Plugins 4.3
    • Themes 4.3
    • Language Packs 4.3
    • IPS Extras 4.3
  • IPS Community Suite 4
    • Applications
    • Plugins
    • Themes
    • Language Packs
    • IPS Extras
  • Books
    • Urdu Novels
    • Islamic
    • General Books
  • XenForo
    • Add-ons
    • Styles
    • Language Packs
    • Miscellaneous XML Files
  • Web Scripts
  • PC Softwares
  • Extras

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Facebook ID


FB Page/Group URL


Bigo Live


Website URL


Instagram


Skype


Interests


Location


ZODIAC

Found 1 result

  1. Make your logo move side to side when mouse over, its actually buzzz effect Goto Personalization -> Styles -> Your Style -> Click on </>, then click Templates and in the search bar, search for the logo. Change: Replace this line below <a href='{setting="base_url"}' id='elLogo' accesskey='1'><img src="{$logo}" alt='{setting="board_name" escape="true"}'></a> With below line <a href='{setting="base_url"}' id='elLogo' accesskey='1'><img src="{$logo}" alt='{setting="board_name" escape="true"}' class="brand buzz-out" ></a> Now goto your css tab > open the custom.css and insert the below line of code .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 } You know what we just did? we have just add the class class="brand buzz-out" to the logo line we edited and then we added the css for animation Enjoy the tuto!
×