Page Shake effect when hitting a button

[ukjingles]

Hi All,

A strange question this time....I can't see any suggestions or answers in the Manual..

Is it possible to add a "Page Shake" effect to my web Site as in when someone clicks a button the whole page shakes (or similar)

On my ( very old) web site it was done with some CSS code I believe...
Trust me there is a reason I want to reapply that effect (be it humorous!)

Thanks!

Pete

[gwpriester]

No idea how to do this Pete, but if I went to a site and the page wobbled upon loading, I wound not find it amusing and would move on.

[handrawn]

I take it this is for an effect to be generated after the visitor has landed, not whilst, and on the rebuild of your site mentioned in your other thread, the subject matter of which might lend itself to such I guess

if it can be done in xara acorn probably knows how

[Egg Bramhill]

Did do a search and it is possible (though I couldn't get it to work!)

LINK

[handrawn]

shaken not stirred

[Acorn]

You need some JavaScript to add an on-click event to the button.
The event attaches a ClassName of shaking to the body TAG and removes it after a second.

The shake itself would use a fairly simply animation like:

<style>
body:hover {   
    animation: shake 0.1s ease-in-out 0.1s infinite alternate;
}


@keyframes shake {
 from {
    transform: rotate(1deg);
 }
 to {
   transform-origin: center center;
   transform: rotate(-1deg);
 }


}
</style>

This code along in the Page Head will run continuously...

Acorn

[ukjingles]

Hi All,

Let me explain what I need it for........

On my old web page there was a button "Do not Press" Obviously people would and it would take you to my "Last Page of the Internet" there was a "next" button you pressed that would make the whole page shudder (for the effect that this was truly the last page of the internet!) Silly I know but funny

Would your code above ACORN do that and how do I insert it (code) into my WD17 web page?

Thanks!

[gwpriester]

Add the code to a placeholder. A placeholder can be any object, usually a plane rectangle.

Select the rectangle and open the Website Properties > Placeholder tabbed section.

Click the HTML Code (Body) button and paste the code in that text box.

Click OK and then click Apply.

This will cause the page to shake until the visitor leaves the page.

What's missing here though is a way to stop the shaking. Acorn, is there a script to stop the action. A button that says, PLEASE STOP IT!!!

[Acorn]

Just make the button jump to a fresh page that has the code added as Gary explained.

On that page, put the Please Stop button with link: javascript: window.close(), or similar.

I don't do requests unless it's interesting, applies to a XDA solution and has a wide use.

Acorn

[ukjingles]

Thanks for the advice so far...It certainly has improved my learning curve!

Yes I got it to shake the whole page as soon as opening (thanks to your advice)
But what I'm trying to do is get the page only to shake for a couple of seconds and only when hitting the red button...

Pete