Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 13
  1. #1
    Join Date
    Aug 2020
    Posts
    6

    Default 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)

    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

  2. #2
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    38,420

    Default 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.
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

    gwpriester.com | Custom-Stereograms.com | eyeTricks on Facebook






  3. #3
    Join Date
    Feb 2007
    Location
    UK
    Posts
    17,869

    Default 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
    -------------------------------
    carpe diem
    carpo vitae

  4. #4
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    19,897

    Default 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
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Quadro 2000 Graphics Card + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive
    Xara Designer Pro X 17 + Xara 3D Maker 7

  5. #5
    Join Date
    Feb 2007
    Location
    UK
    Posts
    17,869

    Default Re: Page Shake effect when hitting a button

    shaken not stirred
    -------------------------------
    carpe diem
    carpo vitae

  6. #6
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    11,979

    Info 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
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  7. #7
    Join Date
    Aug 2020
    Posts
    6

    Default 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

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

    Thanks!

  8. #8
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    38,420

    Default 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!!!
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

    gwpriester.com | Custom-Stereograms.com | eyeTricks on Facebook






  9. #9
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    11,979

    Default 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
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  10. #10
    Join Date
    Aug 2020
    Posts
    6

    Default 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

    Click image for larger version. 

Name:	Screenshot 2020-08-27 080828.jpg 
Views:	17 
Size:	171.7 KB 
ID:	127722

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •