GameBanana shows no ads to members. Sign up now!
Ads keep us online. Without them, we wouldn't exist. We don't have paywalls or sell mods - we never will. But every month we have large bills and running ads is our only way to cover them. Please consider unblocking us. Thank you from GameBanana <3

Post Tools Popout Effect

A Config Script for GameBanana

47 1 kb Raw Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/*** Base Code ***/

.PostTools button
{
        --delay          : .05s;                          /* Delay variable */
        transform        : scale(0);                      /* Resize post tools to become invisible */
        transition       : transform .2s ease-in-out;     /* Smooth transition for the pop out transformation */
}

.Post:hover > .PostTools button
{
        transform        : scale(1);                      /* Reset post tools to normal size, effectively popping them out using transitions. */
}


/*** Transition Delays ***/
/* -- The delays allow individual post tools to pop-out one after the other -- */

.PostTools button:nth-of-type(2)
{
        transition-delay : calc(var(--delay) * 1);
}

.PostTools button:nth-of-type(3)
{
        transition-delay : calc(var(--delay) * 2);
}

.PostTools button:nth-of-type(4)
{
        transition-delay : calc(var(--delay) * 3);
}

.PostTools button:nth-of-type(5)
{
        transition-delay : calc(var(--delay) * 4);
}

.PostTools button:nth-of-type(6)
{
        transition-delay : calc(var(--delay) * 5);
}

.PostTools button:nth-of-type(7)
{
        transition-delay : calc(var(--delay) * 6);
}

Updates

1.6 1mo
  • Refactor Use CSS variables for transition delay.
  • Tweak Tweak selector to handle replies feature as well.
1.5 2y Adjustment 1.4 3y Addition Tweak 1.3 3y Amendment Removal 1.2 4y Optimization

Summary

Post Tools are initially hidden but when you hover on a specific post, the tools on that post will pop out one by one.

Preview

Sign up to access this!

Embed

Share banner
Image URL
HTML embed code
BB embed code
Markdown embed code

Credits

Key Authors
Ring-A-Ding Rampage avatar
Ring-A-Ding Rampage username pic Joined 9y ago
(づ。◕‿‿◕。)づ Ripe Supporter Moderator
Coding
5,289 points Ranked 1323rd
76 medals 11 legendary 20 rare
  • Submitted 60 Sprites Medal icon
  • Thanked 500 submitters Medal icon
  • 15+ Entries! GameBanana’s Christmas Giveaway 2015 Medal icon
  • Submitted 100 Skins Medal icon
  • Reached 100 subscribers Medal icon
  • 15+ Entries! GameBanana’s Christmas Giveaway 2016 Medal icon
CSS

Submitter

Ring-A-Ding Rampage avatar
Ring-A-Ding Rampage username pic Joined 9y ago
(づ。◕‿‿◕。)づ Ripe Supporter Moderator
Coding
5,289 points Ranked 1323rd
76 medals 11 legendary 20 rare
  • Submitted 60 Sprites Medal icon
  • Thanked 500 submitters Medal icon
  • 15+ Entries! GameBanana’s Christmas Giveaway 2015 Medal icon
  • Submitted 100 Skins Medal icon
  • Reached 100 subscribers Medal icon
  • 15+ Entries! GameBanana’s Christmas Giveaway 2016 Medal icon
Ring-A-Ding Rampage avatar
Ring-A-Ding Rampage

Creator
Sign up to access this!
Sign up to access this!
Sign up to access this!

Game

Sign up to access this!

Category

Sub-category
UI Themes
Super-category
Cascade Style Sheets

License

Share

  • Share on Reddit
  • Share on Twitter
  • Share on Facebook
  • 6
  • 2.4k
  • 6
  • 5y
  • 1mo
  • 1mo

More from Submitter

More UI Themes Scripts