Stupid bouncy BBC

[@rjen]

The mod installs its own css. That's the file that needs adding to

[FrizzleFried]

Thanks... added to the mods css and re-installed.  Hard refresh later and the bars are gone!

[Antechinus]

Yes, in index.css. Best place would be at the end of the file, after everything else. That way you are not actually messing with the mod's CSS, in case you ever want to uninstall it. You only need this:

Code Select Expand

.parrot_cage {
overflow: hidden;;
}

ETA: Never mind. Sleepy morning here. Just saw you had already solved it. But for anyone who doesn't want to edit mod code, just adding the above to the end of index.css is fine.

[Antechinus]

Ok, I'm planning more evil.

The catch with all the "bouncing CSS" examples I've seen online is that they are, frankly, inferior to the deprecated marquee tag in terms of behaviour. This is because they rely on having a known height and width on the bouncing bits, so the CSS can work from that. Which, in turn, means that when you have variable content the CSS ends up being a fudge in one way or another (the deprecated marquee tag did not have this problem).

But. by referring back to some ancient CSS tricks I had almost forgotten, I think I have a solution. It will require a bit more markup (not much) and about twice as much CSS (still not much) but it should be bulletproof for any content that will actually fit in the parrot cage (although if the content is almost as big as the cage, obviously it will not bounce much).

I'll whip up a test version and try it out, as a bit of light relief from conversion scripts and regex.

[Antechinus]

Ok depraved web denizens, I have just finished an upgraded version of this mod.
The new version (Stupid_Bouncy_2.1) will install on any version of SMF 2.0.x or SMF 2.1.x.

The new version does not have any issue with scrollbars, and will function correctly with any amount of content (unless I have missed something obscure, in which case feel free to ****** about it).

There are new comments in the CSS file too, showing how to change the number of bounces in the animations. You can (within reason) code in any number of bounces you like. You could even apply media queries to vary the number of bounces according to screen width.

However I'm not going to do all of that at this stage. I'm just releasing it with the standard 5 bounces. If you want to play around with it, suit yourself.

Code Select Expand

/* Animations are set for 5 vertical bounces across the container (.parrot_kingdom). */
@keyframes parrot_cage{
    0%  {left: 0;    bottom: 100%;}
    10% {left: 10%;  bottom: 0;}
    20% {left: 20%;  bottom: 100%;}
    30% {left: 30%;  bottom: 0;}
    40% {left: 40%;  bottom: 100%;}
    50% {left: 50%;  bottom: 0;}
    60% {left: 60%;  bottom: 100%;}
    70% {left: 70%;  bottom: 0;}
    80% {left: 80%;  bottom: 100%;}
    90% {left: 90%;  bottom: 0;}
    100%{left: 100%; bottom: 100%;}
}
@keyframes parrotz{
    0%  {right: 0;    top: 100%;}
    10% {right: 10%;  top: 0;}
    20% {right: 20%;  top: 100%;}
    30% {right: 30%;  top: 0;}
    40% {right: 40%;  top: 100%;}
    50% {right: 50%;  top: 0;}
    60% {right: 60%;  top: 100%;}
    70% {right: 70%;  top: 0;}
    80% {right: 80%;  top: 100%;}
    90% {right: 90%;  top: 0;}
    100%{right: 100%; top: 100%;}
}
/* You can change the number of vertical bounces by editing the animations. */
/* For example: this will give four vertical bounces...

@keyframes parrot_cage{
0% {left: 0; bottom: 100%;}
12.5% {left: 12.5%; bottom: 0;}
25% {left: 25%; bottom: 100%;}
37.5% {left: 37.5%; bottom: 0;}
50% {left: 50%; bottom: 100%;}
62.5% {left: 62.5%; bottom: 0;}
75% {left: 75%; bottom: 100%;}
87.50% {left: 87.5%; bottom: 0;}
100% {left: 100%; bottom: 100%;}
}
@keyframes parrotz{
0% {right: 0; top: 100%;}
12.5% {right: 12.5%; top: 0;}
25% {right: 25%; top: 100%;}
37.5% {right: 37.5%; top: 0;}
50% {right: 50%; top: 100%;}
62.5% {right: 62.5%; top: 0;}
75% {right: 75%; top: 100%;}
87.50% {right: 87.5%; top: 0;}
100% {right: 100%; top: 100%;}
}

/* Any number of bounces can be coded by following this general pattern. */

[Steve]

Thanks Ant! Works a treat! 



What about speed? Is that easily changed?

[FrizzleFried]

New stupid bouncy goes below bottom edge of window... (easily corrected with returns at the bottom but I digress... I figured you'd want to know)...


https://youtu.be/4ey7z_W80wk


EDIT: Actually,  NOT easily corrected with returns.  Adding returns does nothing to stop the bouncy from going below the bottom for me.

[Steve]

I'm not seeing that issue but on mine a smiley goes slightly beyond the edge on the right side. Text works perfectly though.

[FrizzleFried]

Likely caused by my smiley being about double height as normal.  Some padding around said image/word/whatnot would be a nice addition.    Not complaining though... it's stupid... it's bouncy... and now it's also peek-a-boo of sorts.

[Antechinus]

What about speed? Is that easily changed?

Yup.

Code Select Expand

/* Inner containers, for things that bounce. */
.parrot_cage {
/* Do not change these. */
position:absolute;float:left;
/* Animation time can be changed if you like. */
animation: parrot_cage 5s linear infinite alternate;
}
.parrotz {
/* Do not change these. */
position:relative;white-space:pre;font-size:1rem;line-height:1.4rem;text-align:center;
/* Animation time can be changed if you like. */
animation: parrotz 5s linear infinite alternate;
}

Likely caused by my smiley being about double height as normal.  Some padding around said image/word/whatnot would be a nice addition.

Ok, I'll test it with some huge smileys and see what happens.

[Antechinus]

Oh FFS. I just tested it in Chrome and the behaviour is completely different to Firefox, even though the basic code here is Web 101. This is stupid. Filthy ******* ******** ***** and their poxy browsers.

Except Chrome is hiding content at the top of the bounces, not at the bottom. Can't get it to hide at the bottom, even with oversize smileys.

[Antechinus]

Lol. Ok, have tested this mongrel (v2.1.1) in Firefox and Chrome, so it should be pretty much stupid-proof now (famous last words).

It seems to work in both browsers with just about any content I can throw at it. Do be aware that once the content is as big as the container things tend to stop bouncing, so large images or text on small screens will not work very well.

I have slowed down the default animation from 5s to 6s, which should feel a bit better.

Also note that Chrome (ha!) has a long-standing bug with relative positioning, which will mean the bouncing content of the tag will be hidden at the bottom of the bounces.

To get around this you can add some optional bottom padding to the container (in px).

For example, this is the basic tag with no padding:

Code Select Expand

[bouncy][/bouncy]
While this will give a bottom padding of 66px:

Code Select Expand

[bouncy padding=66][/bouncy]
Basically, if you don't want things hidden at the bottom of the bounces in Chrome ( ) chuck in a number that is equal to the height of the bouncing div in px.

This is not required in Firefox (because Firefox handles relative positioning correctly). If you like Firefox and want to annoy people who use Chrome, leave the padding out and then pretend you don't know what they are complaining about.

So far I have not tested this on Android (only on Windows). I am not going to test it on iOS (because Safari screws everything).

[Steve]

Thanks Ant!

[Antechinus]

By the way, if anyone wants to get really silly you could get all sorts of effects by editing the animations. For instance, you could make stuff just bounce up and down in the middle, before suddenly ricocheting all over the container, or you could make it spin while it bounces.

It would even be possible to code for different selectable animations, just by including an extra class that could be used in the CSS file to call from a range of animations. Then you could do stuff like:

Code Select Expand

[bouncy bounces=3][/bouncy]

[bouncy bounces=4][/bouncy]

[bouncy bounces=5][/bouncy]

[bouncy bounces=spin][/bouncy]

[bouncy bounces=stupid][/bouncy]
Which may be in the next version, if I get to feeling extra stupid and bouncy sometime.

ETA: Quick example. This will make your bouncing content turn upside down at the start and end of the container.

Code Select Expand

@keyframes parrotz{
0%  {right: 0;    bottom: 100%;}
10% {right: 10%;  bottom: 0;}
20% {right: 20%;  bottom: 100%;}
30% {right: 30%;  bottom: 0;}
40% {right: 40%;  bottom: 100%; transform: rotate(180deg); transform-origin: center;}
50% {right: 50%;  bottom: 0;}
60% {right: 60%;  bottom: 100%; transform: rotate(180deg); transform-origin: center;}
70% {right: 70%;  bottom: 0;}
80% {right: 80%;  bottom: 100%;}
90% {right: 90%;  bottom: 0;}
100%{right: 100%; bottom: 100%;}
}
It looks totally ridiculous.
And this will make the bouncing content do a 360 degree spin while bouncing across the container.

Code Select Expand

@keyframes parrotz{
0%  {right: 0;    bottom: 100%;}
10% {right: 10%;  bottom: 0;}
20% {right: 20%;  bottom: 100%;}
30% {right: 30%;  bottom: 0;}
40% {right: 40%;  bottom: 100%;}
50% {right: 50%;  bottom: 0;}
60% {right: 60%;  bottom: 100%;}
70% {right: 70%;  bottom: 0;}
80% {right: 80%;  bottom: 100%;}
90% {right: 90%;  bottom: 0;}
100%{right: 100%; bottom: 100%; transform: rotate(360deg); transform-origin: center;}
}
This is quite good too (makes the bouncing content do a spin at each end).

Code Select Expand

@keyframes parrotz{
0%  {right: 0;    bottom: 100%;}
10% {right: 10%;  bottom: 0;}
20% {right: 20%;  bottom: 100%; transform: rotate(360deg); transform-origin: center;}
30% {right: 30%;  bottom: 0;}
40% {right: 40%;  bottom: 100%;}
50% {right: 50%;  bottom: 0;}
60% {right: 60%;  bottom: 100%;}
70% {right: 70%;  bottom: 0;}
80% {right: 80%;  bottom: 100%; transform: rotate(360deg); transform-origin: center;}
90% {right: 90%;  bottom: 0;}
100%{right: 100%; bottom: 100%;}
}

[Antechinus]

Lol. Ricochet effect, with spins.

Code Select Expand

@keyframes parrot_cage{
0%      {left: 0;       top: 50%;}
25%     {left: 50%;     top: 100%;}
50%     {left: 100%;    top: 50%;}
75%     {left: 50%;     top: 0;}
100%    {left: 0;    top: 50%;}
}
@keyframes parrotz{
0%      {right: 0;      bottom: 50%;}
25%     {right: 50%;    bottom: 100%;}
50%     {right: 100%;   bottom: 50%; transform: rotate(360deg); transform-origin: center;}
75%     {right: 50%;    bottom: 0;}
100%    {right: 0;    bottom: 50%;}
}
Hell, I think I have just about talked myself into a v2.2. This is just too much stupid bouncy fun.

[Steve]

I think a monster has been created!

[Antechinus]

Yeah. I just finished the next version: v2.1.2.
I'm just about to put it on the mod site page.
It's backwards compatible with v2.1.1 tags but has added insanity.

I'll set up a demo later, but basically these are the options:

Bounce height can be changed by wrapping bouncy in size.

Code Select Expand

[size=7][bouncy][/bouncy][/size]
There are optional padding and bounce parameters available.

Padding can be useful for some browsers/content/animations,
if your content is partly hidden at the top/bottom of bounces.
This ~ [bouncy padding=33] ~ gives 33px top/bottom padding.

The bounce parameter gives you 4 types of animation.
The basic tag has 5 bounces across the page ~ [bouncy]
This has 5 bounces, with a flip at each end ~ [bouncy bounce=flip]
This has 5 bounces, with a continuous spin ~ [bouncy bounce=spin]
This animation has a ricochet + spin effect ~ [bouncy bounce=zomg]
       
You can use padding + bounce ~ [bouncy padding=33 bounce=zomg]

ETA: Ok, it's on the mod site now. The internet is doomed.

[Steve]

Just tried several different options/parameters and .

[Antechinus]

Awesome, innit?
I think I had better leave it there. Anything more might really be a bit much.

And on that note, having made the internet a far more stupid and bouncy place, I think I'll get some sleep.

[Steve]

Awesome job, Ant!


The only thing I could wish for is to be able to pad all four sides individually, like [bouncy padding=10,20,20,10]