Several useful itemsheaderbar slide top

Several useful items in this section
Previous topicNext topic
User avatar

Topic Author
TRUBLITZ
Users
Users
    Windows 8 Chrome
Magic user status: Offline
Posts: 33
Joined: Mar 15th, '18, 13:35

headerbar slide top

Post by TRUBLITZ »

Slide-Top

Add some movement to your style. In this example we will slide the headerbar, and slide it upwards (top).

Demo: - you can peek at my headerbar, i current have this installed.

Open: - Your last loading css file. (not responsive) and add,

CSS

Code: Select all

@keyframes slide-top {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
    opacity: 1;
  }
}
Find:

Code: Select all

.headerbar
After Add:

Code: Select all

    webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
    animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
    
save, upload, dump your cache.

Yes, you can add this code to navbar, forumbg, forabg etc.. add just like you added to headerbar.

If you add this to forumbg, add this to your css, it will add some margin bottom to the action bar

Code: Select all

.action-bar {
    margin: 8px 0;
}
Last edited by TRUBLITZ on Apr 10th, '20, 22:08, edited 2 times in total.
My Styles
:guns: I AM THE DESCENDANT OF THOSE WHO REFUSE TO BE RULED :guns:
User avatar

martin
Admin
Admin
    Linux Chrome
Magic user status: Offline
Posts: 4703
Joined: Apr 6th, '14, 14:12

Re: headerbar slide top

Post by martin »

Put it in a ext since 3.1 ppl dont care for edits any more.
Use this to install an ext on your board no more ftp or path making.
Path too install this ext is ext/boardtools/upload
Download is here Make it easy for us to solve your issues
User avatar

Topic Author
TRUBLITZ
Users
Users
    Windows 8 Chrome
Magic user status: Offline
Posts: 33
Joined: Mar 15th, '18, 13:35

Re: headerbar slide top

Post by TRUBLITZ »

Wish i knew how.. Im a 3d modeler and stylist, i dont know jack about php or how to make exts. Wish i did. Feel free :rolling:
User avatar

martin
Admin
Admin
    Linux Chrome
Magic user status: Offline
Posts: 4703
Joined: Apr 6th, '14, 14:12

Re: headerbar slide top

Post by martin »

I have it in ext now.

Take it and rename it.
removed.
User avatar

Topic Author
TRUBLITZ
Users
Users
    Windows 8 Chrome
Magic user status: Offline
Posts: 33
Joined: Mar 15th, '18, 13:35

Re: headerbar slide top

Post by TRUBLITZ »

No shit huh? Nice! No need to rename it thou you did it! Nice job man!
User avatar

martin
Admin
Admin
    Linux Chrome
Magic user status: Offline
Posts: 4703
Joined: Apr 6th, '14, 14:12

Re: headerbar slide top

Post by martin »

Simple one change my name to yours in all files and board links.
User avatar

dmzx
Founder
Founder
    Linux Chrome
Magic user status: Online
Posts: 5831
Joined: Jan 13th, '14, 20:45

Re: headerbar slide top

Post by dmzx »

:thumbup:
binance.com ;) try it!
Previous topicNext topic