News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Stupid bouncy BBC

Started by Antechinus, March 03, 2013, 07:30:33 PM

Previous topic - Next topic

Antechinus

Link to the mod

Stupid Bouncy BBC
by Antechinus

Now updated to version 2.1.9

This mod installs on any version of SMF 2.1.x (2.1 to 2.1.99).

Do you feel like doing crazy stuff just for the heck of it?

:D I have just the BBC tag you need! :D

It will make people crack up laughing, or drive them bonkers, or both.
It makes stuff simultaneously bounce up, and down and side to side.
That is the basic setting. This mod is capable of a lot more than that.

Tag options index
1/ Disabled tags
2/ Hover options
3/ Toggle options
4/ Timing options
5/ Height options
6/ Padding options
7/ Default animations
    a) Default bounces
    b) Vertical marquees
    c) Horizontal marquees
8/ Custom animations
9/ Custom hover options

No editor button is provided. Type the tag like this:

[bouncy][/bouncy]
There are six optional parameters available:
bounceheighthoverpaddingtime and  toggle.
You can use none of these, or any combination of them.
Place them in any order in the leading tag. All of these are fine:

[bouncy][/bouncy]
[bouncy time=2][/bouncy]
[bouncy time=2 padding=32][/bouncy]
[bouncy padding=32 time=2][/bouncy]

The default CSS for this tag is customisable - if you know what you are doing.
The default CSS does not contain colours, or many other presentation details.
Add these to your theme's CSS, if you want to style this tag to match your theme.
Details would usually be added to the parrot_kingdom and parrot_show classes.

And remember: with great bouncy power comes great responsibility. :D


Disabled tags

Note that the following BBC tags break layout if used inside bouncy.
Because of this, use of these tags inside the bouncy tag is disabled.

bdo, bouncy, center, code, html, hr, justify, left, list, ltr, me, move, quote, right, rtl, table, youtube
Hover options

The hover option controls animation behaviour when the cursor is over the tag.
Default behaviour pauses animations when the cursor is over the main container.
To change the default behaviour, so that animations only start when
the cursor is over the main container, edit the default CSS here:

Code (Find) Select
/* For God's sake, stop those bounces! :D */
.parrot_kingdom:hover .parrot_cage,.parrot_kingdom:hover .parrot {
    animation-play-state:paused;
}
Code (Replace) Select
/* For God's sake, stop those bounces! :D */
.parrot_kingdom .parrot_cage,.parrot_kingdom .parrot {
    animation-play-state:paused;
}
.parrot_kingdom:hover .parrot_cage,.parrot_kingdom:hover .parrot {
    animation-play-state:running;
}

If hover=chase, people have to hover over the bouncing content to pause the animations.
This option is for when you feel like surprising someone (and thoroughly annoying them).

[bouncy hover=chase][/bouncy]
Of course, if someone does that to you with their bouncy tag you might want revenge.
If you set hover=nonstop the animations will never stop, no matter what anyone does.

[bouncy hover=nonstop][/bouncy]
If you are feeling particularly evil, use hover=peekaboo. This means the
animations will never stop, but if the cursor is hovered over the moving
content it disappears from view, before reappearing somewhere else.

[bouncy hover=peekaboo][/bouncy]
Note: nonstop and peekaboo are not controlled by the toggle option.
If you want to change that, edit this code near the top of the CSS file.

Code (Find) Select
/* Classes inside :not() are immune to toggles! */
.parrot_kingdom:not(.nonstop,.peekaboo) .parrot_frozen + .parrot_cage,
.parrot_kingdom:not(.nonstop,.peekaboo) .parrot_frozen + .parrot_cage .parrot {
    animation-play-state:paused;
}
Code (Replace) Select
/* Yes, Ant will let you use !important here. :D */
.parrot_frozen + .parrot_cage,.parrot_frozen + .parrot_cage .parrot {
    animation-play-state:paused!important;
}

Toggle options

Setting toggle=true displays a toggle, to disable or enable animations.
Clicking any toggle disables or enables all bouncy animations on the page.

[bouncy toggle=true][/bouncy]
Note that reloading the page will reset animations to their default values.
In other words: toggling animations does not create a permanent setting. 

Timing options

The time option lets you change the animation time.
time only accepts whole seconds (no decimal places).

[bouncy time=1][/bouncy]
[bouncy time=22][/bouncy]
[bouncy time=333][/bouncy]

Height options

The height option is for dealing with a bug in browsers based on Chrome.
It refers to the height of the moving content - not overall height of the tag.
Setting height is necessary for all animations (except horizontal marquees).
The best value for height is equal to the height of the moving content.
For example, this would be the best value for a 64px high smiley:

[bouncy height=64]:big_smiley:[/bouncy]
If in doubt: guess the height, then set it a bit larger (20px extra is ok).

Padding options

Padding is not necessary for the basic bounce animation, or for the marquees.
padding is useful for spinning or flipping content - bounce=flip/spin/zomg.
If the content is partly hidden at top, bottom, left or right: add some padding.
Enter any number to add that amount of top and bottom padding in pixels:

[bouncy padding=32][/bouncy]
Doing this automatically adds half that amount of left and right padding.
This is a good compromise for a wide range of content and animations.

Default animations

Container height can be changed by wrapping bouncy in size.
You can use this to adjust bounce height for bouncing animations.
You can also use it to adjust the scroll height for vertical marquees.

[size=4][bouncy][/bouncy][/size]
[size=5][bouncy][/bouncy][/size]
[size=6][bouncy][/bouncy][/size]

Standard content bounces four times, across the page and back.
The bounce option lets you select from another 15 animations.

bounce=flip adds a flip to the first and last bounce on each side.
bounce=spin adds a continuous spin to the standard four bounces.
bounce=zomg changes the standard bounces to a spinning ricochet.
bounce=zomg_alt reverses the direction of bounce=zomg.

[bouncy bounce=flip][/bouncy]
[bouncy bounce=spin][/bouncy]
[bouncy bounce=zomg][/bouncy]
[bouncy bounce=zomg_alt][/bouncy]

Vertical marquees

vert_rise changes the tag to a bottom-to-top vertical marquee.
vert_fall changes the tag to a top-to-bottom vertical marquee.
vert_both changes the tag to an alternating vertical marquee.

[bouncy bounce=vert_rise][/bouncy]
[bouncy bounce=vert_fall][/bouncy]
[bouncy bounce=vert_both][/bouncy]

Horizontal marquees

bounce=move_left changes the bouncy tag to a right-to-left marquee.
bounce=move_right changes the bouncy tag to a left-to-right marquee.
bounce=move_both changes the bouncy tag to an alternating marquee.
This option is mainly intended for extra stupidity with animated gifs.
Most of these gifs have animals walking or running from left to right.
move_both will flip the gif 180 degrees when it is moving right to left.
This means the gifs will always be walking or running the correct way.
both_move is basically the same as move_both, but reversed,
to suit gifs that are animated to move from right to left by default.

[bouncy bounce=move_left][/bouncy]
[bouncy bounce=move_right][/bouncy]
[bouncy bounce=move_both][/bouncy]
[bouncy bounce=both_move][/bouncy]

There are horizontally-flipped alternatives of these four options.
These are included mainly for total silliness. You can set up bouncy
tags stacked down the page, and then have gif content in each tag
running in the opposite direction to the adjacent tags.

bounce=move_left_alt switches bounce=move_left horizontally.
This makes gifs that have left to right animations look correct
when they are starting at the right side, and moving left.
bounce=move_right_alt switches bounce=move_right horizontally.
This makes gifs that have right to left animations look correct
when they are starting at the left side, and moving right.
bounce=move_both_alt switches bounce=move_both horizontally.
This makes gifs that have left to right animations look correct when they
start at the right side, moving left initially, before changing direction.
bounce=both_move_alt switches bounce=both_move horizontally.
This makes that gifs have right to left animations look correct when they
start at the left side, moving right initially, before changing direction.

[bouncy bounce=move_left_alt]
[bouncy bounce=move_right_alt]
[bouncy bounce=move_both_alt][/bouncy]
[bouncy bounce=both_move_alt][/bouncy]

Custom animations

You can create custom animations by writing your own CSS.
Subs-Stupid-Bouncy.php accepts bounce names that are:
1/ composed of all lowercase letters
2/ in groups of one to nine letters
3/ in one, two, or three groups
4/ separated by an underscore

Add custom bounce classes to any CSS file called on that page.
For bounce=lollipop, deranged_bandicoot, and this_is_bonkers:

.lollipop {foo: ****}
.lollipop .parrot_cage {foo: ****}
.lollipop .parrot {foo: ****}

.deranged_bandicoot {foo: ****}
.deranged_bandicoot .parrot_cage {foo: ****}
.deranged_bandicoot .parrot {foo: ****}

.this_is_bonkers {foo: ****}
.this_is_bonkers .parrot_cage {foo: ****}
.this_is_bonkers .parrot {foo: ****}

Note that these examples would not be accepted:

bounce=lollipop2 /* Contains an integer */
bounce=lollipopS /* Contains an uppercase letter */
bounce=deranged-bandicoot /* Not separated by an underscore */

Custom hover options

You can create custom hover options by writing your own CSS.
Subs-Stupid-Bouncy.php accepts hover class names that are:
1/ lowercase letters only
2/ maximum of nine letters

hover=newhover  /* This will be accepted. */
hover=new_hover /* This will not be accepted. */


Changelog

May 9, 2022 - Version 2.1.9 - Added support for @Media (prefers-reduced-motion)


This mod is licensed under the ISC license.

Copyright (c) 2022, Antechinus

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee
is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE
INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE
LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER
RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

Colin

"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

Arantor


busterone


xrunner

Oh my - I'm installing it now, just the thing to spice up the forum for a while.  :)

Costa

Hugo "Costa" Fernandes - PT SMF
Todas as MP's a pedir ajuda são sujeitas a radioactividade, microondas, queimadas e atiradas borda fora.

"At least someone appreciates the fact that I am doing and not thinking..."
"Laziness is counter-revolutionary."

TheListener

OMG Ant ya really are nuts lol.

I remember when you showed us what this looked like a while back.

Mick.

That's the Harlem shake mod lol. Awesome.

bolubeyi61


Arantor

I suspect it would be better not to encourage everyone to do it by making it idiotproof. Certain browsers have been known to have trouble if there are too many marquees on a single page.

Antechinus

No button.

Quote from: Antechinus on March 03, 2013, 07:30:33 PMNo button is provided, in the interest of maintaining some semblance of common decency.


Shambles

Lol. Been using your original 'boing' BBCode for quite some time  ;D

kat

Oh for the days when we had nutters like Ant on the BoD. ;)

Gryzor


Chalky

I'm already using the [boing] too, but apparently my members on Chrome couldn't see it, it just looked the same as the [move] marquee code.  Does this mod fix that?  Or am I asking for too much now wanting to inflict "the bounce" on all my members?  :P

Shambles

The code is the same as boing ;)

Chalky


Antechinus

Yup. I just changed to tag name to make it easier to type. Same code.

If Chrome wont handle nested marquees (and TBH I didn't check that) then they'll just have to live with it.

Arantor

It handles it just fine - but if there's only one line of text, Chrome decides it doesn't have the room to marquee it vertically.

Give it an image and it'll work as expected.

Advertisement: