Stupid bouncy BBC v2.1.9 Hooks only
Stupid bouncy BBC, plus a range of marquees. Good for scrolling news or notices, or just for fun.
Compatible With
2.1.1
Latest version
v2.1.9
Downloads
1,142
Reviews
2
Rating
5/5
Subscribers
4
License
(View License)
Author(s)
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?
I have just the BBC tag you need!
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:
There are six optional parameters available:
bounce, height, hover, padding, time 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:
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.
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.
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:
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).
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.
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.
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.
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.
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).
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:
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:
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.
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.
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.
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.
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.
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:
Note that these examples would not be accepted:
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
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.
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?
I have just the BBC tag you need! 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:
Code Select
[bouncy][/bouncy]There are six optional parameters available:
bounce, height, hover, padding, time 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:
Code Select
[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.
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.
Code Select
bdo, bouncy, center, code, html, hr, justify, left, list, ltr, me, move, quote, right, rtl, table, youtubeHover 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).
Code Select
[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.
Code Select
[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.
Code Select
[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.
Code Select
[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).
Code Select
[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:
Code Select
[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:
Code Select
[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.
Code Select
[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.
Code Select
[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.
Code Select
[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.
Code Select
[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.
Code Select
[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:
Code Select
.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:
Code Select
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
Code Select
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.
You have to register or login to be able to leave a review
FrizzleFried •
May 01, 2022, 04:44:59 PM •
5/5
Stupid Bouncy BBC is stupid fun! You won't believe what your smileys ... images ... and text can do with this mod.
Steve •
July 02, 2023, 07:35:45 PM •
5/5
An amazing mod that you can have a lot of fun with. In addition you can make it do things SMF doesn't have the inherent capability to do.
Pages1