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
Re: Page Shake effect when hitting a button
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.
Re: Page Shake effect when hitting a button
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
Re: Page Shake effect when hitting a button
Did do a search and it is possible (though I couldn't get it to work!)
LINK
Re: Page Shake effect when hitting a button
Re: Page Shake effect when hitting a button
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
Re: Page Shake effect when hitting a button
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!
Re: Page Shake effect when hitting a button
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!!!
Re: Page Shake effect when hitting a button
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
1 Attachment(s)
Re: Page Shake effect when hitting a button
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