Page Shake effect when hitting a button

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

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

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.

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

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

LINK

shaken not stirred :D

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:

Code:

---

<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

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 :D

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

Thanks!

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

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

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

Attachment 127722

I think the suggestion was made to create a duplicate page that does not shake that the button you have to stop the page shaking links to. That make sense.

Quote:

---

Originally Posted by gwpriester

I think the suggestion was made to create a duplicate page that does not shake that the button you have to stop the page shaking links to. That make sense.

---

Not quite as the whole page would shake as soon as you open it (I want it to shake only when hitting the button and only for a couple of seconds) As I said to give the effect that this really is the "Last page of the Internet" :D

Hi all,

Somebody on another forum (Paul) has managed to work out the code needed but does anybody know how do you add all three sections using WD17?

https://codepen.io/paulobrien/embed/...s://codepen.io

That would be a question for the Xara support forums as I doubt anyone here uses wysiwyg editors any more. Most of the coders here do it from scratch so I’m not sure you will get the answer you need here unfortunately.
Usually there will be some sort of mechanism to add custom code and html etc (as in wordpress) but it usually involves a bit of effort. You will need to be able to add the script and the required css and be able to target the button via its id or class.
I had a quick link at the documentation but it doesn’t even mention custom code

Paul