How can I add this kind of click-effect?

Ask the community
,
1

I want to add the visual button push effect that you can try on this page so how shall I code it?

https://www.myinstants.com/instant/michael-scott-thank-you-98625/#google_vignette

2

If you want the effect to be exactly as in the link, you’ll have to create your own element using an iframe or a custom element, and add mousedown event listener that triggers some animation.

3

Thanks, so you don´t think I will need a multibox? What code would you write if you wanted to to add such a button-effect?

4

@kricke73 You could do a similar effect with Velo, but it won’t be the exact effect (since Velo doesn’t support mousedown events).
So as I said you can do it in an iframe (embedded widget) or a custom element.
They used 2 different png images as background . one for pressed button and one for not-pressed button , and they switched them when the button is active (:active css).
(P.S. You can do something without images if you like, using transform:matrix() as you can see here , but it won’t be 100% identical).

They let you use their button by setting the iframe src to “https://www.myinstants.com/instant/michael-scott-thank-you-98625/embed/”
But it’ll come with credit for the developer (I suggest you’ll build one of your own).

5

@jonatandor35 Thank you very much for the tip and explanations. Can you figure out how to code a switched images button with active CSS?

6

I succede with an pressed image effect with this simple code but the “pressed” image (image 2) continues being shown after a click. How can I make it repell back again emediately after the click?

export function button3_click ( event ) {
$w ( “#image61” ). hide ();
$w ( “#image62” ). show ();
}

7

First of all, you should see the difference between their effect to yours.
In their example, the image changes on mouse down and goes back on mouse up.
While in your example it only changes on click (=after mouse up).

As for your question. You can do:

export function button3_click(event) {
Promise.all([
  $w("#regualButtonImg").hide(),
  $w("#pressedButtonImg").show()
]).then(() => {
  setTimeout(() => {
    $w("#pressedButtonImg").hide();
    $w("#regualButtonImg").show();
    }, 150)
  })
}

this 150 is the delay in milliseconds. You can change it as you wish.

8

@jonatandor35 Thank you very much! What does “Promise.all” stand for?