Link to the mod (https://custom.simplemachines.org/index.php?mod=3661)
Stupid Bouncy BBCby AntechinusNow updated to version 2.1.9This 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! :DIt 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 index1/ Disabled tags (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme1)2/ Hover options (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme2)3/ Toggle options (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme3)4/ Timing options (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme4)5/ Height options (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme5)6/ Padding options (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme6)7/ Default animations (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme7) a) Default bounces (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme7) b) Vertical marquees (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme7a) c) Horizontal marquees (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme7b)8/ Custom animations (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme8)9/ Custom hover options (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme9)
No editor button is provided. Type the tag like this:
[bouncy][/bouncy]There are six optional parameters available:
bounce (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme7), height (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme5), hover (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme2), padding (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme6), time (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme4) and toggle (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme3).
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 tagsBack to start (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme0)
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, youtubeHover optionsBack to start (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme0)
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:
/* For God's sake, stop those bounces! :D */
.parrot_kingdom:hover .parrot_cage,.parrot_kingdom:hover .parrot {
animation-play-state:paused;
}/* 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.
/* 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;
}/* Yes, Ant will let you use !important here. :D */
.parrot_frozen + .parrot_cage,.parrot_frozen + .parrot_cage .parrot {
animation-play-state:paused!important;
}Toggle optionsBack to start (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme0)
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 optionsBack to start (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme0)
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 optionsBack to start (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme0)
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 optionsBack to start (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme0)
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 animationsBack to start (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme0)
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 marqueesBack to start (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme0)
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 marqueesBack to start (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme0)
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 animationsBack to start (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme0)
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 optionsBack to start (https://custom.simplemachines.org/index.php?action=post;sa=edit;mod=3661#SBreadme0)
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. */
ChangelogMay 9, 2022 - Version 2.1.9 - Added support for
@Media (prefers-reduced-motion) (https://developer.mozilla.org/en-US/docs/Web/CSS/%5Bmember=49905%5DMedia%5B/member%5D/prefers-reduced-motion)
This mod is licensed under the ISC license (https://opensource.org/licenses/IS/).
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.
:P
Awesome.
I love it. ;D
Oh my - I'm installing it now, just the thing to spice up the forum for a while. :)
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi.imgur.com%2F7ftluqn.gif&hash=34ac85a12a2d7f9774785d031d65a8d5fb5c23a6)
OMG Ant ya really are nuts lol.
I remember when you showed us what this looked like a while back.
That's the Harlem shake mod lol. Awesome.
thanks.
add bbc icon?
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.
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.
thanks.
Lol. Been using your original 'boing' BBCode for quite some time ;D
Oh for the days when we had nutters like Ant on the BoD. ;)
We need more like this.
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
The code is the same as boing ;)
Thanks Shambles :)
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.
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.
Thanks.
I apologize in advance if my question is you do not like but still:
not it be better to do through the hooks? bbkodah seems to have this opportunity.
just when there is a lot of mods are very often conflicts.
License WTFPL :D
Adding an entire exta file to every page load is needlessly inefficient.
Yup, for something this small I thought an extra file was just ridiculous. Hooks have their disadvantages too.
Probably a dumb question... but I assume this (and the marquee function) use client side CPU cycles, etc... rather than server side?
Yes, it will use client-side CPU cycles. There is no difference in server-side processing other than having to go through another bbcode item.
BTW... combine this with the MOVE BBC code and you get some really random crazy stuff...
I've just updated this mod.
It now uses hooks for installation, and CSS transitions to animate the movement.
No more deprecated marquees. It will just keep working in any modern browser.
License has been changed to ISC, which is basically as unrestrictive as WTFPL but has less swearing. :)
Now the GPU can partake in the fun!
I just realised something about this. :D
Since it is based on CSS, the bounces can be made responsive! By default I set it for ten bounces across the container, over a period of 4 seconds, which is about right for desktop. Wouldn't be so good on phones though. On a phone you'd probably want 3 or 4 bounces over a period of 1.5-2 seconds,
This can be done with media queries. No worries.
How do you slow this down?
Play with the CSS. Just adjust the timings. Should be pretty obvious once you take a look at it and mess around a bit. Just be aware that most of the CSS should be left alone for good behaviour, but there's no harm in changing the timing of the animations.
.parrotz {
position:absolute;width:100%;height:100%;
animation: parrotz 5s linear infinite alternate;
}
/* Define animations (best to leave this alone). */
@keyframes parrotz{
0% {transform:translateX(90%) translateY(0%)}
10%{transform:translateX(81%) translateY(90%)}
20%{transform:translateX(72%) translateY(0%)}
30%{transform:translateX(63%) translateY(90%)}
40%{transform:translateX(54%) translateY(0%)}
50%{transform:translateX(45%) translateY(90%)}
60%{transform:translateX(36%) translateY(0%)}
70%{transform:translateX(27%) translateY(90%)}
80%{transform:translateX(18%) translateY(0%)}
90%{transform:translateX(9%) translateY(90%)}
100%{transform:translateX(0%) translateY(0%)}
}
The 5s sets how long it takes for one trip across the screen, in one direction (ie: 10s for a trip across and back).
The other bits allow 5 bounces for one trip across the screen (ie: one up and down cycle every 2 seconds).
You could set it to fewer bounces if you like. Just keep 90% as the upper limit on translateX unless you want things to bounce out of the parent container (you could use hidden overflow on the parrot cage and have things bouncing out of sight if you want that effect).
Awesome. Thanks Antechinus.
...one of my favorite add-on BBC for 2.0.x... any chance of a 2.1.x update?
This mod works fin on SMF2.1: just install with emulation.
But I would suggest one addition to the css, because I am seeing scroll bars...
.parrot_cage {
position: relative;
width: 100%;
margin: 1em 0;
height: 8em;
OVERFLOW: HIDDEN;
}
I'll dig this thing out and mess with the coding a bit. It's probably possible to improve it. TBH the old marquee tag was perfect for this. CSS animations are a lot tricker to set up for varying content.
Would be cool to add the option(s) of move-left and move-right (and maybe move-up and move-down) if at all possible...
If you want that, get someone else to code it. This is just bouncy. :D
TBH it would probably make more sense to do those as separate BBC tags. Shouldn't be hard to arrange. Even easier than bouncy.
It's an automatic no unless you ask.
;)
I really dug some of the odd results using bouncy + move would result in.
A CSS3 move tag should be easy to make. I might take a look a it if nobody else wants to.
Quote from: @rjen on March 01, 2022, 03:56:42 PMThis mod works fin on SMF2.1: just install with emulation.
But I would suggest one addition to the css, because I am seeing scroll bars...
.parrot_cage {
position: relative;
width: 100%;
margin: 1em 0;
height: 8em;
OVERFLOW: HIDDEN;
}
At the risk of sounding like an idiot (grin)...
Where do I put this CSS? In the index.css of each of my themes or is there a centralized place I could put it to affect all themes? I am getting this bar as well.
Thanks!
The mod installs its own css. That's the file that needs adding to
Thanks... added to the mods css and re-installed. Hard refresh later and the bars are gone!
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:
.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.
Ok, I'm planning more evil. :D
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. :P
Ok depraved web denizens, I have just finished an upgraded version of this mod. :D
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 :P 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. ;)
/* 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. */
Thanks Ant! Works a treat! ;D
What about speed? Is that easily changed?
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.
I'm not seeing that issue but on mine a smiley goes slightly beyond the edge on the right side. Text works perfectly though.
Likely caused by my smiley being about double height as normal. Some padding around said image/word/whatnot would be a nice addition. :D Not complaining though... it's stupid... it's bouncy... and now it's also peek-a-boo of sorts.
;)
Quote from: Steve on April 28, 2022, 06:06:00 AMWhat about speed? Is that easily changed?
Yup.
/* 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;
}Quote from: FrizzleFried on April 28, 2022, 08:30:33 AMLikely 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.
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.
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:
[bouncy][/bouncy]
While this will give a bottom padding of 66px:
[bouncy padding=66][/bouncy]
Basically, if you don't want things hidden at the bottom of the bounces in Chrome ( :P ) 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. :D
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).
Thanks Ant!
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:
[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. :D
ETA: Quick example. This will make your bouncing content turn upside down at the start and end of the container.
@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. :D
And this will make the bouncing content do a 360 degree spin while bouncing across the container.
@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).
@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%;}
}
Lol. Ricochet effect, with spins.
@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. :D
I think a monster has been created! (https://i.imgur.com/FfiWcus.gif)
Yeah. :D 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. :D
I'll set up a demo later, but basically these are the options:
Bounce height can be changed by wrapping bouncy in size.
[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. :D :D :D
Just tried several different options/parameters and (https://i.imgur.com/gtbONSE.gif).
Awesome, innit? :D :D :D :D
I think I had better leave it there. Anything more might really be a bit much. :D
And on that note, having made the internet a far more stupid and bouncy place, I think I'll get some sleep. ;)
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]
Sure, that could be done. I can think of one other possible refinement too.
The Chrome bug is due to Chrome needing a defined height set on any parent element that has a position: relative; child element. The problem is that the height will vary according to content, and getting the height of a bouncing element is a bit of a PITA even with the document inspector. If you entered the wrong height, that would screw things up a bit in all browsers (although in practice any height within a few px of the actual height would be near enough to work).
It may be worth adding a touch of javascript to automatically define the height of .parrot_cage, so that the basic bounce animation works properly in Chrome and Firefox without the user having to do anything.
Quote from: Steve on April 29, 2022, 09:04:24 AMThe only thing I could wish for is to be able to pad all four sides individually, like [bouncy padding=10,20,20,10]
On second thought: why? Give me a use case that makes sense. Offhand I can't see one.
Played around with the javascript. Ain't happening. Got it working ok, but it's inconsistent with how it calculates the heights. Shouldn't be, but is, and I suspect it has something to do with the animations borking up how the js calculates heights of bouncing and spinning elements (ie: results are more consistent for the ones that don't flip or spin).
Anyway, since this is a Chrome bug, in that the positioning works perfectly for width and only screws up on height, I am of the opinion that they can fix their f*****g browser. If it screwed up on both I could cut them some slack and pretend it was a valid interpretation of the W3C standards, but since it is only screwing up on height that means they have screwed up with their browser (and there are various bug reports over a period of years for this one).
Implementing the javascript "fix" makes Chrome better sometimes, but Firefox worse sometimes, and with the daft way things are supposed to be loaded for mods these days figuring out how to load the js conditionally (ie: for Chrome only) is taking more patience than I have left. So, it ain't happening. :P
For now, v 2.1.2 is the final version. :)
Ok, I went and made some final tweaks anyway ~ v2.1.3 is now available.
This gets around the Chrome/Edge/etc position: relative; bug by (optionally) nailing the problem at the source. There is now a height attribute available. If it is set to match the static height of the bouncing div in pixels, results should be spot on in all decent browsers. Weird obscure browsers can go get ******. I'm doing this for fun, not for torture. :P
As an example for a 64px high smiley:
[bouncy height=64]:big_smiley:[/bouncy]
Also, you can now pause the animation by hovering your cursor over the parent div (class="parrot_kingdom"). I figured that might be handy for the occasional sanity break. :D
Apart from that, everything is still the same. The mod is still compatible with SMF 2.0.x or 2.1.x, and is backwards compatible with any existing bouncy tags.
Go nuts. The internet is waiting for you. :P
Thanks again Ant. :)
I did have one other thought: it could be fun to only pause the animation when you hover over the bouncing content, so that people have to chase it to stop it. That's a simple CSS tweak.
Since install/uninstall is done by a basic require-file/remove-file, any edits to the CSS file will have no effect on installing or uninstalling the mod. If anyone wants to mess with the CSS a bit it's fine to do that.
So, if you want to make your users chase bouncing things to stop them bouncing... :D :D :D
/* For God's sake, stop those bounces! :D */
.parrot_kingdom:hover .parrot_cage,.parrot_kingdom:hover .parrot {
animation-play-state:paused;
}/* For God's sake, stop those bounces! :D */
.parrot_cage:hover,.parrot_cage:hover .parrot {
animation-play-state:paused;
}
Meh. :D Ok, since it is raining anyway...
...I tweaked this thing a bit more. :D :D
The version-in-waiting has the padding coded like this:
'padding'=> array('optional' => true, 'value' => ' style="padding:$1px calc($1px / 2)"', 'match' => '(\d+)'),
If PHP fries your brain: all that means is the padding is still set in the editor with an integer, the same way it always was (ie: padding=32). This is to keep things simple, and allow full backwards compatibility with existing tags. However, it will now automatically add left and right padding that is half the value of the top/bottom padding.
After testing with a wide variety of content, this seems to be a good compromise that is easily dialled in to give good results on any post area large enough to hold the content (ie: it can still be partially obscured, or not bouncing much, on a phone). So from the perspective of the end user there is no real difference: you just use it like the previous versions, and add padding if you need it.
But, of course, I did have to plan some more evil. :P
By default it will still pause the animations if you hover your cursor over the main parent div (class="parrot_kingdom"). However, if you want to mess with people's heads (and who doesn't?) you can enter an optional hover parameter. This will accept two values: chase, and ohffs. :D
[bouncy hover=chase][/bouncy]
[bouncy hover=ohffs][/bouncy]
The chase value will do what I mentioned in that CSS tweak in the previous post: it will make people chase the bouncing content and hover their cursor over it to stop the animations. This is just in case you feel like surprising someone and thoroughly annoying them. :D
Of course, if someone does that to you with their bouncy tag you might want revenge. This is where the ohffs value comes in. If you enter that into the tag parameters, the animations will never stop no matter what anyone does. :D :D :D
I think this is about as far as it is reasonably sane (ha) to go with options. If anyone disagrees, speak soon or forever hold your codpiece.
Ok, I've gone and done it. Stupid Bouncy BBC 2.1.4 is now available.
Backwards compatible with existing tags, as always, but with extra stupid!
The main changes since my previous post are marquees. It seemed silly to not have a replacement for the old deprecated move tag, and the CSS involved is trivially simple, so we now have stupid (but not bouncy) marquees as well. Even though the marquees do not actually bounce, they are still set by the bounce parameter for the sake of simplicity.
bounce=move_right changes the bouncy tag to a left-to-right marqee.
bounce=move_left changes the bouncy tag to a right-to-left marqee.
bounce=move_both changes the bouncy tag to an alternating marqee.
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 critters will always be walking or running the way they should.
For a full explanation of all options, please see the OP of this thread (https://www.simplemachines.org/community/index.php?topic=498945.0). :)
I'm not sure we shouldn't call the guys in the white coats for you Ant! :P
The changes are cool and thank you again. ;D
I think this is the final version for some time. I can't really think of anything else that is worth doing with it. ;)
And I have a converter to fix anyway.
HOLY SMOKES! I go on vacation for 3 short days and return to stupid bouncy insanity! I can't wait to install and get real stupid!!!
Thank you Antechinus...this is gunna be fun (I use the stupid bouncy mostly for HAPPY BIRTHDAY messages to users).
;)
Uh oh... what am I doing wrong? Old mod... bouncy bounced (but with it peeking below). I install this version and no bounce... at all... using standard tag.
Oddly... the [bouncy hover=chase] tag just... ads padding between the letters only..
ScreenHunter 431.jpg
PS: Of course no offense on the SUPER STUPID comment... the topic of the post is "SUPER STUPID BOUNCY"... :)
No idea. Works perfectly on my box. Need more information.
ETA: Hang on. The CSS and markup have been changed. Did you force a hard refresh (Ctrl+F5) ?
ETA2: I should probably put version numbers on the CSS file, so any new files get cached automatically.
THAT was the key! Thank you!! (Why I keep forgetting to at least try a hard-refresh before reporting these issues is beyond me... argh!)
It gets me a lot of the time too. ;D
If I do a 2.1.5 version I'll rename the CSS file to bouncy_215.css or something. Problem solved. :)
I have a real stupid last request if at all possible. If it's difficult... at all... ignore my stupidity...
Right now I have like a half dozen images that would work great with the move both command... EXCEPT they are all facing left ... which means they are all going backwards. :)
Any way to make "move both" in to "move both_lr" and "move both_rl" or something... so that it starts left right one way or right left the other?
If not... no worries... I'll just go out and find some animated gifs facing the other way (or use my gif editing software to flip em).
Quote from: Antechinus on May 01, 2022, 10:16:40 AMIf I do a 2.1.5 version I'll rename the CSS file to bouncy_215.css or something. Problem solved. :)
IF, he says ... (https://i.imgur.com/FfiWcus.gif)
I think I might have given him an excuse... by accident.
;)
Lol. Hey Steve: get the team to enable bouncy tags here. Ideal for support topics. Great way to showcase the flexibility of SMF 2.1. :D :D :D :D
Quote from: FrizzleFried on May 01, 2022, 10:24:26 AMI have a real stupid last request if at all possible. If it's difficult... at all... ignore my stupidity...
The real problem is that all these things are stupidly easy. :D
QuoteRight now I have like a half dozen images that would work great with the move both command... EXCEPT they are all facing left ... which means they are all going backwards. :)
Yes, this had occurred to me too...
We shall see. :D
After doing some testing... at this point... I am thinking you may want to rename the mod...
What was stupid has become pretty damn kickass.
I propose Not-Stupid Bouncy BBC or just simply Kickass Bouncy BBC.
Yes the multiple marquees are actually useful for news tickers, etc. Not sure if I really want to rename it though. I do like the current name, and it still contains plenty of stupid. :D
Ok, the only tricky part about your request is what to call the option. An obvious choice is both_move, but OTOH I'm half inclined to name it evom_htob just for laughs. :P
ETA: I suppose I could get even more evil with hover options too...
Quote from: Antechinus on May 01, 2022, 04:25:00 PMHey Steve: get the team to enable bouncy tags here. Ideal for support topics. Great way to showcase the flexibility of SMF 2.1.
Ha! I had to walk barefoot through broken glass and flaming embers just to get a simple rule change ... :P
Quote from: Antechinus on May 01, 2022, 04:44:46 PMI do like the current name
+1
Ok, I just whipped up the vertical marquees, and the both_move option.
[bouncy bounce=both_move]Slides to left-right-left... ad infinitum[/bouncy]
Vertical marquees are much the same as horizontal.
[bouncy bounce=move_rise]Slides to top[/bouncy]
[bouncy bounce=move_fall]Slides to bottom[/bouncy]
[bouncy bounce=move_vert]Slides to bottom-top-bottom, ad infinitum[/bouncy]
Do note that for the vertical marquees it will be necessary to include the height parameter, to ensure correct behaviour with Chrome and any browsers based on Chrome.
Vertical marquees are set to centre-align any content. You can also wrap vertical marquees in float tags, to place them at the left or right of other content (floats don't really work with the other animations, unless you get really tricky).
Also, vertical marquees have the top and bottom padding overridden in the CSS, so that you can (if you wish) add side padding without screwing the animation. ;)
Now, before I go packaging this beast up again: are we quite sure this is enough? :P
ETA: Ok, I did the obvious. Added a time parameter to adjust animation-duration.
Hahaha... is it even possible to do anything else with text or smiley?!?
:D
It is possible, but I am beginning t think it really is not advisable. There has to be a limit to this mod somewhere. I think anything past this point should be custom insanity by the site admin. ;)
Anyway, the timing function will accept any values from 1s to 99.9s (ie: integer + one optional decimal place). Timing values < 1 second are not accepted, because that really does get stupid.
Ok, thought of one more refinement.
Since the array of bounce options was getting rather long anyway, I've changed the logic to match strings of up to nine lowercase letters. These can be in either a single group, or in two groups separated by an underscore. This means there is no longer any need to define custom animation classes in Subs-Stupid-Bouncy.php. If you want to add extra animations of your own, you can decide on your own class names and add them to any CSS file that is called on that page.
IOW, if you want two new animations called lollipop and deranged_bandicoot you can write your own declarations like this:
.lollipop {whatever: ****}
.lollipop .parrot_cage {whatever: ****}
.lollipop .parrot {whatever: ****}
.deranged_bandicoot {whatever: ****}
.deranged_bandicoot .parrot_cage {whatever: ****}
.deranged_bandicoot .parrot {whatever: ****}
If you enter an incorrect animation name, it will just be ignored and the tag will fall back to the default bouncy animation. :)
Holy smokes... can it get ANY stupider? I just can't imagine!!
You sir, are just stupid awesome and I applaud your foray in to the realm of stupidity!
My users ... and I ... thank you!
Ok, version 2.1.5 is locked and loaded.
ETA: Lol. Did a CSS whoopsie in 2.1.5. Try 2.1.6 instead. That one works. :D
One slight change from my previous post (https://www.simplemachines.org/community/index.php?msg=4122866): on reflection I decided to only make the time option accept integers. This is to keep things simple, and keep it consistent with other options. So, no fractions of a second for animation times. It's whole seconds only, which TBH I think is perfectly adequate for this use case.
If anyone really wants fractions of a second in animation times there are three ways you can do it:
1/ Write your own regex for Subs-Stupid-Bouncy.php, or...
2/ Edit the default animation times in stupid_bouncy_***.css, or...
3/ Use custom CSS in another theme file, to override the default animation times.
ETA: Oh yeah, the CSS file name has changed. I'm now putting the version number on the end of the CSS file name, so that a hard refresh will not be necessary when updating the mod. This is version 2.1.5, and the _bae suffix is the 2nd, 1st and 5th letters of the alphabet. Obviously if there is a next version, the suffix will be _baf. :)
PS: And, obviously, 2.1.6 does indeed have the _baf suffix. :P
Ok, whatever: 2.1.7 is up. I just thought of a couple of things I really should have included in 2.1.6, namely a couple of extra CSS options.
So... you can now have a non-alternating left-to-right marquee (ie: travels left-to-right only) or a non-alternating right-to-left marquee, that will both accept gifs that are animated to go in the opposite direction by default.
So if you have a gif of a running dog, that runs from left to right by default, and you want to put it in a marquee that only goes right to left, you can use bounce=move_right_alt to flip a right-moving gif the other way. If your dog naturally runs from right to left, and you want him only running left to right, you can use bounce=move_left_alt.
I also added a bounce=zomg_alt to reverse the direction of the existing bounce=zomg, just because it was so trivially easy so might as well have it.
And class names can now accept up to three groups of nine letters each, just to make some of the class names a bit clearer.
And yes, this one has a _bag suffix on the CSS file, so no hard refresh needed. ;)
I think I really am over this thing for a while. It comes with 16 animations coded in by default.
Time to write your own animations and see what you can come up with. :D
I'll package up a 2.1.8 sometime soon, mainly so the mod can use loadCSSFile when running on SMF 2.1.x.
Other changes planned are:
1/ Fix a typo or two in the readme (d'oh).
2/ Add the ability to create custom hover classes, just by editing the CSS.
The latter will similar to the way custom bounce classes can be done: regex that will accept groups of 1 to 9 letters.
I'll let the current version percolate for the rest of the week. If anyone has any extra ideas that are not completely insane, I am prepared to consider them. :)
FWIW... I will be installing Bugo's Message Bookmark mod simply to be able to easily refer to this mods instructions...
:D
You sir... are stupid genius. :)
Easy way to have a reference is to simply copy the readme file content to a forum post. It's all written in standard post BBC, so will keep the same formatting as you see in admin when installing the mod. I actually wrote the readme on my local test site. :)
The OP of this thread (which is the same as the mod description page on the Mods Site here) is a direct copy/paste from the readme. It contains all the information you need for a reference. ;)
Well, slap my a** and call me Sally! You just keep outdoing yourself!
My personal belief is that it's getting to the point where one can't possibly remember all the different things this mod does. :P
Like
@FrizzleFried, I'm bookmarking the instructions page. ;D
Quote from: Steve on May 02, 2022, 09:21:23 AMMy personal belief is that it's getting to the point where one can't possibly remember all the different things this mod does. :P
Well when I included basic sliding marquees, which are sane and useful for news and notices, I started to feel the mod was getting a bit too sensible . So I thought "Hey, do the job properly. Bring back the stupid!"
The idea of having marquees that would handle a gif that was in the opposite direction by default was due to a daft gif I have had for ages. If you set up two consecutive bouncy tags, with the dogs gif running in opposite directions, it's just too hilarious. Check the attached gif, and try it. ;)
ETA: The two bounce settings you want for this trick are move_both and move_both alt. Drop a dog gif in each one and crack up laughing.
Or even three, like this...
[bouncy bounce=move_both][img]http://127.0.0.1/SMF_21x/wooferz.gif[/img][img]http://127.0.0.1/SMF_21x/wooferz.gif[/img]
[img]http://127.0.0.1/SMF_21x/wooferz.gif[/img][/bouncy]
[bouncy bounce=move_both_alt][img]http://127.0.0.1/SMF_21x/wooferz.gif[/img][img]http://127.0.0.1/SMF_21x/wooferz.gif[/img]
[img]http://127.0.0.1/SMF_21x/wooferz.gif[/img][/bouncy]
(https://i.imgur.com/9FcxOD9.gif)
Quote from: Antechinus on May 02, 2022, 09:13:17 AMEasy way to have a reference is to simply copy the readme file content to a forum post. It's all written in standard post BBC, so will keep the same formatting as you see in admin when installing the mod. I actually wrote the readme on my local test site. :)
The OP of this thread (which is the same as the mod description page on the Mods Site here) is a direct copy/paste from the readme. It contains all the information you need for a reference. ;)
Exactly... and then BOOKMARK that post for easy reference.
:)
I just thought: it would be easy for me to drop anchors into the readme, and make a small clickable table of contents. That will work as a forum post too, as long as the anchor ID's aren't duplicated on that page.
What is this? Another STUPID request? Awe, hell no!
Yup.
Users are requesting that I change the default for the stop animation on hover... they feel it should be defaulted OFF rather than ON if it's omitted from the BBC string... can I make that happen without you having to do anything?
PS: I told them their request was stupid... until I agreed with them... then I figured it wasn't stupid enough to not ask about.
;)
This is a major dilemma. If it defaults to off, then it is no longer stupid and bouncy. I can't help feeling this is somehow immoral and will destroy the cosmic balance.
However, I can code another hover option which is essentially the reverse of the default behaviour. I'm fine with doing that. I was thinking of a couple more (evil) hover options anyway, so I suppose one more for the sake of sanity is not going to be too deplorable.
Please bear in mind though that I do have ethical standards, and feel duty bound to keep this tag living up to its glorious heritage. :)
ETA: Ok, I've added a new hover option to the test build, to give the behaviour your users requested. However it will have to be entered as the hover parameter for it to work.
[bouncy hover=sheikh_yerbouti][/bouncy]/* For God's sake, stop those bounces! :D */
.sheikh_yerbouti {
border-radius:4px;outline:1px solid;opacity:.4;
}
.sheikh_yerbouti:hover {
opacity:1;
}
.sheikh_yerbouti .parrot_cage,.sheikh_yerbouti .parrot {
animation-play-state:paused;
}
/* Oh noes! Chase those bounces! :D */
.sheikh_yerbouti:hover .parrot_cage,.sheikh_yerbouti:hover .parrot {
animation-play-state:running;
}This is logical and sensible, since when you hover over the div the content will proceed to shake its booty.
Right, as threatened previously, here is an evil hover option. :D
/* Mwahahaha! Sneaky bounces forever! :D */
.peekaboo:hover .parrot_cage,.peekaboo:hover .parrot {
animation-play-state:running;
opacity:1;
transiion: opacity .6s linear .6s;
}
.peekaboo .parrot_cage:hover,.peekaboo .parrot_cage:hover .parrot {
animation-play-state:running;
opacity:0;
transiion: opacity .1s step-start;
}
What does this one do? Glad you asked. When you hover over the parent div, the animation keeps running. So, any user might think it's bounce=chase and all they have to do is hover over the moving content to stop it...
...but...
...when they hover over the moving content it disappears from view, but it keeps moving, then reappears somewhere else.
The idea is to make people behave like a cat chasing a laser pointer. Should be awesome fun. :D :D :D :D :D
You're a very sick man, Ant ... (https://i.imgur.com/FfiWcus.gif)
Why, thank you. I knew you'd understand. :D
Had an idea. I'm definitely not setting the tags to static by default (although anyone can edit the CSS to do that if they want to) but there is another option which may be worth having.
It's easy to set up a clickable span to freeze animation in all bouncy tags, with said span having low opacity off hover and sitting in the top right corner of the tag. Then if someone is cracking up laughing at all the bouncy tag madness they can let it run.
If they seriously want to stop the madness they can click one icon, on any bouncy tag, to disable all of them on that page. This works by toggling a .frozen class on the .parrot_kingdom div, so madness be switched back on with another click.
Code looks like this:
$(".parrot_toggle").on("click",function(){
$(".parrot_kingdom").not(".nonstop,.peekaboo").toggleClass("frozen");
});
$(".parrot_kingdom:not(.nonstop,.peekaboo) .parrot_toggle").removeClass("parrot_hidden");
And yes, that is me being evil and refusing to allow the js to disable animations in tags that have hover=nonstop or hover=peekaboo :D but the code is easy to edit for personal preference.
Obviously a new page, or a page reload, would reset all tags to their default animations anyway.
Ok, have this sorted. :)
It now uses vanilla JS, so the same file can be used for 2.0.x or 2.1.x (without relying on any mods for 2.0.x calling jQuery).
// Vanilla js: toggles class on parent, for all of child class.
const parrot_toggle = document.querySelectorAll(".parrot_toggle");
parrot_toggle .forEach(item => {
item.addEventListener("click", function() {
parrot_toggle .forEach(a => {
a.closest(".parrot_kingdom").classList.toggle("parrot_frozen");
});
});
});
There is now an optional toggle parameter for the tag. If toggle=true the toggle will be visible*. If the toggle is clicked it will switch animations on or off for all bouncy tags on that page. This means you can still be evil, and set hover=peekaboo without setting toggle=true.
I do like a bit of evil. :D
*Technically it is visible all the time, but since styling is only applied when the toggle parameter is true you cannot see the toggle span by default (it is just empty, and floated, so it takes up no space and does not interfere with anything else).
OK, sorted. The latest version drops support for SMF 2.0.x.
Got to the point where I could not be bothered debugging anything in 2.0.x.
So, from now on it's SMF 2.1.x only (which is what I intend to use anyway).
The new version has every option any sane (or not) person can reasonably use. There is a pretty comprehensive explanation in the readme file, and in the OP of this thread. The readme is written in BBC, so can be copy/pasted to a forum post for reference.
All sections of the readme are linked (by iurl) from a table of contents at the top. It even has "Back to top" links built in. If you can't find what you need to know, I'm claiming it isn't my fault. :P
Go nuts. :D
(https://i.imgur.com/hZozNZd.gif)
I'm stupified...
Pretty cool mod never tried it before
I'd go so far as to call this mod "Stupid Cool"...
;)
A "speed" option ... ahem. Nevermind.
It all started one day, years ago, when I realised I could nest two marquee tags and make things hilarious. It has evolved quit a bit since then.
I'll add one tweak to the next version:
/* -------------------- */
/* Animation keyframes. */@media (prefers-reduced-motion) {
.parrot_cage,.parrot {
animation-name: none!important;
}
}
/* -------------------- */
/* Animation keyframes. */See: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
QuoteIndicates that user has notified the system that they prefer an interface that removes or replaces the types of motion-based animation that trigger discomfort for those with vestibular motion disorders.
Ok, new version uploaded, containing the accessibility tweak mentioned in the previous post. No other changes. :)
Which does what exactly? (Sorry, my coding skills are non-existent.)
Read the MDN link in the previous post. That is what it is there for. :P
Basically, the new bit of CSS stops people who have some forms of motion sensitivity having an aneurysm, if they have specified in their browser or OS settings that they don't want animated gizmos giving them an aneurysm.
And of course I totally missed that link. (https://i.imgur.com/lefk6z8.gif)
Sorry about that. Hope you don't mind but I edited your post to put an empty line between the link and the quote below it. Makes it less likely to miss. I'll certainly put it back the way it was if that's what you want.
That's fine. ;)
I just gotta re-visit how stupid-awesome this mod is...
:D
[bouncy bounce=move_both][img]https://i.pinimg.com/originals/10/d0/1a/10d01a7b55b7d75fbea163645bed8a2d.gif[/img][img width=200]https://i.redd.it/atbl6pdc6jo71.gif[/img][/bouncy]
That's too funny! :D
Just curious, why don't you use the YouTube tag?
Oh yeah... we have that. :o
My forum has embedding so I just post and go... I forgot we actually have a way to embed (without auto embedding).
Was going to edit... too late! Doh!
Quote from: FrizzleFried on May 25, 2022, 10:58:21 AMWas going to edit... too late!
Did it for you. ;D
I had that embed function too so it took me a little while to get used to having the YouTube button. ;D
Lol. This is the way the mod should be used. :D
Can the move and timing commands be used together ... i.e. can I change the time it takes for the image/text to scroll horizontally from either or both directions?
Yes, of course. It tells you that right at the start of the readme. :P
QuoteThere 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:
[bouncy][/bouncy]
[bouncy time=2][/bouncy]
[bouncy time=2 padding=32][/bouncy]
[bouncy padding=32 time=2][/bouncy]
(https://i.imgur.com/lefk6z8.gif)
I should make a new license based on the ISC license, with an appropriate clause added, and call it the RTFM license. :D
You b******! (https://i.imgur.com/9FcxOD9.gif)
I deserved that. ;D
I was thinking about this the other day, in relation to a11y concerns. I did add the automatic disabling of animations (https://www.simplemachines.org/community/index.php?msg=4123759) for anyone who had previously set a call for prefers-reduced-motion in their OS settings.
But, it may also be worth changing the toggle coding to make it a permanent (device-dependent) setting. That way if anyone usually liked the giggles but was having a migraine (or whatever) they could click a toggle to set a local storage item, which can then be called on any page to keep animations stopped until they want to free them again.
This is a simple change, which won't affect anything else, so I should probably do it more or less soonish. If anyone has thought of any issues or requests for further tweaks, feel free to suggest them. :)