Code to create Web Page shake/shudder

HTML & CSS
1

Hi All,
I don’t know if anybody on here can help me… :thinking:
I’m trying to find some code (CSS) that will allow me to make my whole web page shake/shudder for a second or two when pressing a big red button that states “Do Not Press”
Any ideas anybody?
Thanks!
Pete

2

Hi you would need some JS if you want it to work on click and then add a class to the body element. You can then use that class to do a CSS animation on the body element which should shake the whole page.

Here’s a rough example.

2 Likes
3

I didn’t know the exact solution but see if this helps https://elrumordelaluz.github.io/csshake/

2 Likes
4

They are good effects but the OP will still need to apply those classes dynamically to make it all happen on the click of the button (as in my example). The css animations are (generally) the easy part and I wouldn’t use a library for one effect although looking at the code will provide a good learning experience in how to animate keyframes etc :slight_smile:

5

Hi Paul,

Thanks for your quick reply…
That is exactly what I mean…
I’m using Xara Web Designer Premium 17 to build my new website but what and how do I add this to my page?
I’m guessing I have to use a Placeholder box to add the code? :thinking:
Here’s an copy of the page that I want to add it to…

https://www.petewilson.net/test.htm

Thanks,

Pete

6

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 although I notice someone n the support forums mentioned the placeholder you talked about but alas could not find it in the documentation.

It may be that Xara does not allow the type of customisation you need as some web builders are very rigid in what they allow.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.