Stupid bouncy BBC

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

Previous topic - Next topic

inter

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
Sorry for my English

Arantor

Adding an entire exta file to every page load is needlessly inefficient.

Antechinus

Yup, for something this small I thought an extra file was just ridiculous. Hooks have their disadvantages too.

FrizzleFried

Probably a dumb question... but I assume this (and the marquee function) use client side CPU cycles, etc... rather than server side?


Arantor

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.

FrizzleFried

BTW... combine this with the MOVE BBC code and you get some really random crazy stuff...

Antechinus

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

live627

Now the GPU can partake in the fun!

Antechinus

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.

Steve

DO NOT pm me for support!

Antechinus

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

Steve

Awesome. Thanks Antechinus.
DO NOT pm me for support!

FrizzleFried

...one of my favorite add-on BBC for 2.0.x... any chance of a 2.1.x update?

@rjen

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;
}
Running SMF 2.1 with latest TinyPortal at www.fjr-club.nl

Antechinus

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.

FrizzleFried

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

Antechinus

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.

FrizzleFried

It's an automatic no unless you ask.

;)

I really dug some of the odd results using bouncy + move would result in.


Antechinus

A CSS3 move tag should be easy to make. I might take a look a it if nobody else wants to.

FrizzleFried

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!

Advertisement: