Stupid bouncy BBC

[FrizzleFried]

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.

[Antechinus]

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.

Code Select Expand

[bouncy hover=sheikh_yerbouti][/bouncy]

Code (stupid_bouncy.css) Select Expand

/* 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.

[Antechinus]

Right, as threatened previously, here is an evil hover option.

Code Select Expand

/* 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.

[Steve]

You're a very sick man, Ant ...

[Antechinus]

Why, thank you. I knew you'd understand.

[Antechinus]

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:

Code Select Expand

$(".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 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.

[Antechinus]

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).

Code Select Expand

// 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.

*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).

[Antechinus]

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.

Go nuts.

[Steve]

[FrizzleFried]

I'm stupified...

[Diego Andrés]

Pretty cool mod never tried it before

[FrizzleFried]

I'd go so far as to call this mod "Stupid Cool"...




A "speed" option ... ahem.  Nevermind.

[Antechinus]

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:

Code ("CSS - Find") Select Expand

/* -------------------- */
/* Animation keyframes. */

Code (Replace) Select Expand

@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

Indicates 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.

[Antechinus]

Ok, new version uploaded, containing the accessibility tweak mentioned in the previous post. No other changes.

[Steve]

Which does what exactly? (Sorry, my coding skills are non-existent.)

[Antechinus]

Read the MDN link in the previous post. That is what it is there for.

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.

[Steve]

And of course I totally missed that link.

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.

[Antechinus]

That's fine.

[FrizzleFried]

I just gotta re-visit how stupid-awesome this mod is...

Code Select Expand

[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]

[Steve]

That's too funny! 

Just curious, why don't you use the YouTube tag?