Code to make web page shake/shudder?

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

Hello @ukjingles, welcome to the GitHub Support Community.

One thing I can think of would be to utilize CSS Animations and transform, then add a class to the body for some time, before removing it.

Example:

CSS

@keyframes shake {
    0% { transform:rotate(0deg)   scale(1) }
   25% { transform:rotate(35deg)  scale(1.5) }
   50% { transform:rotate(0deg)   scale(2) }
   75% { transform:rotate(-35deg) scale(1.5) }
  100% { transform:rotate(0deg)   scale(1) }
}

body.shake {
  animation:shake 500ms linear infinite;
  overflow:hidden;
}

JavaScript

// replace BUTTON_ID with whatever the id of your button is
document.getElementById('BUTTON_ID').onclick = function () {
  // add shake class, but only if it hasn't been applied
  if (!/shake/.test(document.body.className)) {
    document.body.className += ' shake';

    // remove shake class after 3 seconds
    window.setTimeout(function() {
      document.body.className = document.body.className.replace(' shake', '');
    }, 3000);
  }
};

Feel free to adapt it to your needs.

Hi @sethclydesdale,
Thanks for your reply…
I’m re-building my web site and unlike all you clever boys (and girls) and I’m using Xara Web Designer 17…
(The last time I did it I used Frontpage 2003!) :grinning:
This is the page I want to add the code to But I don’t where I add both CSS and JavaScript to in the page?


I know you can open a box in WD17 “Web Properties” and add a place holder (see attached photo)

Any help would be greatly appreciated

Many Thanks!

Pete

Hmm… can’t say I’m very familiar with that application.

Generally speaking though, CSS should go into your external stylesheet or an inline <style> tag. JavaScript should go into a <script> tag. If you can insert these elements into your document and then paste their respective codes into each of them, you should be good.

After looking at your document, the only thing I’d recommend changing is the JS to this:

function shakePage () {
  // add shake class, but only if it hasn't been applied
  if (!/shake/.test(document.body.className)) {
    document.body.className += ' shake';

    // remove shake class after 3 seconds
    window.setTimeout(function() {
      document.body.className = document.body.className.replace(' shake', '');
    }, 3000);
  }
};

Then just add shakePage(); to the onclick attribute for your button.

1 Like

Thanks sethcyldesdale…
Sound’s good but it’s gone right over my head as I use WWYISWG and I just thought there would be an easy answer to insert this code! :thinking:

Pete

Did a bit of searching and came up with this thread. Seems you can add CSS/JS by adding it with the HTML code (body/head) button in your prior screenshot. Just make sure to wrap the code with the necessary tags:

  • <style>CSS_HERE</style> for CSS
  • <script>JAVASCRIPT_HERE</script> for JS

Thanks sethclydesdale…
Still no luck…
I added both of your above codes to the Head section… also enclosed both with the tags you supplied
All that has happened is I’ve lost the top section of the Brick Wall background when previewing…
In the JavaScript code (which bit do I remove/replace) My button is named;- button.png
JavaScript

// replace BUTTON_ID with whatever the id of your button is
document.getElementById('BUTTON_ID').onclick = function () {
  // add shake class, but only if it hasn't been applied
  if (!/shake/.test(document.body.className)) {
    document.body.className += ' shake';

    // remove shake class after 3 seconds
    window.setTimeout(function() {
      document.body.className = document.body.className.replace(' shake', '');
    }, 3000);
  }
};

I thought it would be easier to do… :grinning:

Pete

You put the JS in the head, correct? If so, replace it with the one below. (I’ve added the tags for you.)

<script>function shakePage () {
  // add shake class, but only if it hasn't been applied
  if (!/shake/.test(document.body.className)) {
    document.body.className += ' shake';

    // remove shake class after 3 seconds
    window.setTimeout(function() {
      document.body.className = document.body.className.replace(' shake', '');
    }, 3000);
  }
};</script>

I see your button has an onclick event handler.

Can you modify the contents of this attribute? You’ll want to replace it with shakePage(); return false; so you get something like this:

<a href="javascript:;" onclick="shakePage(); return false;">
  <span class="xr_ap" style="left:275px;top:658px;width:104px;height:88px;">
    <img class="xr_ap xr_1as4 xr_1a7" src="end_htm_files/293.png" alt="" title="" onmousemove="xr_mo(this,12,event)" style="left:0px;top:0px;width:104px;height:88px;">
  </span>
</a>

Of course, if you want to maintain the original JS as well, simply replace the contents of onclick with this instead: shakePage();xr_ocro(this,'xr_0as3','xr_0a7');return(xr_nn());