[CSS] Scrolling Tabs

Unplugged's picture




Scrolling Tabs


JS base credit goes to Hraeth, altered by me. Credit appreciated but not needed.
This code requires basic CSS knowledge to style and alter the tabs. Enjoy!


Tips


Change scroll speed: edit "transition: all 2s" to desired speed.

If you edit width and height, make sure to edit all number values accordingly.
Example: if you edit the width to from 500px to 300px, you need to edit 510px to 310px, 1020px to 620px, and so on. The 10px difference is the space between every tab.

Other Links: Link Collection, CSS Quick Reference


Codes


In the pastebin, pick out the code for the desired amount of tabs.
Horizontal Scroll
Vertical Scroll



LINK 1 LINK 2 LINK 3


div1
div2
div3




LINK 1 LINK 2 LINK 3


div1
div2
div3

Evern's picture

(No subject)

<3 Definetly gonna use this

kiwara's picture

This is awesome. Thank you

This is awesome. Thank you for sharing!
Avatar © Squeegie & Siggy © Caiir + other
Hraeth's picture

omg you're makin' all the

omg you're makin' all the cool things...
go ben..

unffff, pure brilliance

unffff, pure brilliance
Qanat's picture

gotta scream at this too man

gotta scream at this too
man i wanna use everything you make sigh
Mjrn's picture

Thank you so much for this

Thank you so much for this Ben.
Account previously Mjrn, returned to Veedeer.
_lioness_'s picture

(No subject)

Mest
Shelby
Unplugged's picture

Thank you guuuyyys, i hope

Thank you guuuyyys, i hope it's useful!
Echosong's picture

woAH

woAH
Thais's picture

Thank you!

Thank you!
Display pic by crabbycrown ♥
tigerart27's picture

Ooo

Ooo <3
depstop's picture

Aah thank you! track.

Aah thank you!
track.
Aivilo's picture

Nifty~

Nifty~

Never liked tabs and this

Never liked tabs and this looks like a blessing. Thanks for sharing it with the people.
Eq's picture

oohh wow, someone's been

oohh wow, someone's been busy. Thanks c:

n aiye, the links were screwing with me too x_x


Chizzune's picture

omg I must use that

omg I must use that
Unplugged's picture

Thanks for the heads up Eq!

Thanks for the heads up Eq! The :0px thing is an oversight on my part. I thought i'd fixed all of it but apparently not. >_>
Thanks for the fix on the horizontal. Must've overlooked it. I fixed both things now.
Fincayra's picture

WHOO these codes are

WHOO these codes are brilliant- thanks for sharing!
TreeDancer's picture

-screeches into void-

-screeches into void- ommgggggg
IvyChain's picture

(No subject)

<3 Thanks ben
HoneyDiva's picture

sssooOOOOO MANY COOL

sssooOOOOO MANY COOL THINGS
thanks a lot!! uvu
Mjrn's picture

Do these have invisible

Do these have invisible scrolls btw?
Account previously Mjrn, returned to Veedeer.
Unplugged's picture

They don't.. but they're

They don't.. but they're pretty easy to implement. I can make a version with them.
Mjrn's picture

I'm...very bad with hidden

I'm...very bad with hidden scrolls, I can never figure them out or get them to work. If it's not an inconvenience, could you please cook one up?
Account previously Mjrn, returned to Veedeer.
LooksForDoves's picture

t.

t.

WOAH

WOAH