Creating Roller Effects

[Jonnie Grieve]

I think one of the things that GWD is missing at the moment is the abity to make your call to action buttons more distinctive by being able change its appearance when you hover and click on then.  I know that interactions in GWD are created by creating tap area components.

But when you're creating these components woluld it be possible to have a workflow  that allows you to select a different appearance for buttons based on if the button is being hovered or clicked.

Such as an "Up" state, "Down" state, "Hover" state etc.

Many thanks, 

[San Khong]

Hi Jonnie,

We're working on an events model that allows you to add events to any element, not just the tap area component.  Once we have that, you might be able to add an event to your button and write your own custom events through our UI to change the appearance of the button on click or hover.  This workflow still requires some coding as you would need to write your own CSS to change the appearance of the button.  I think what you're requesting is more like a "CSS Presets" idea in which you can choose the CSS preset (appearance change such as fade-in or fade-out on click or hover).  Is that assumption correct?

Thanks,

San (GWD Team)

[Jonnie Grieve]

Hello San,

This might be naughty of me but I think I was thinking of some sort of workflow where you could type in image paths, alt tag etc for both the original image and the rollover image much like you could do in Dreamweaver.  

So not necessarily thinking about fades but swapping 2 images to mimic a rolleover effect or a click effect for the click of a button. That said, fading effects that could only make GWD even more powerful.

It's probably not very helpful to keep drawing inspiration from the Adobe Suite as I've done in the past,  but it was the only way I could think of to author such a technique from the UI 

[Google Web Designer beta]

Hi Jonnie,

The roller effect you described can also be achieved with CSS pseudo-classes, :hover and :active:

  https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

  https://developer.mozilla.org/en-US/docs/Web/CSS/:active

The easiest way to set this on an element: 

- select the taparea (or any element you want to change)

- open CSS panel

- click on the [+] button on the bottom to add a new CSS rule. The name of the rule should be automatically highlighted. It should look something like ".gwd-new-class-abc4"

- append ":hover" to the class name: ".gwd-new-class-abc4:hover"

- click [Add] button below

- for property, type "border"

- for value type "10px solid"

- go to preview

You should see a 10px solid border surrounding your taparea when you hover over it.

Going back to adding roller effect for your call to action button, instead of adding an image under the tap area, a common approach is to set different background-image on the taparea with different pseudo-classes. More about background-image can be found here:

  https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

For example, you can have

#my-call-to-action-id {

  background-image: url(url to normal button icon)

}

#my-call-to-action-id:hover {

  background-image: url(url to hovered button icon)

}

#my-call-to-action-id:active {

  background-image: url(url to clicked button icon)

}

Note the css rule begins with # instead of . in this example. This is because I am using the id of the call to action button directly. You can find out the id of your call to action button by going to the properties panel.

Hope this helps.

Cheers,

Paul

[Jonnie Grieve]

Thanks Paul for your reply and your detailed instructions. A great workaround in the meantime and I look forward to trying it. 

[brandon...@gmail.com]

Great instructions! I was able to get the border to appear with ease!

I'm creating an expandable advert. How could we use this same code to the tap area when hovered to jump to next slide (ie. expandPg1) instead of having to click a button to expand the ad?

Many thanks.

Brandon

[scott.sc...@gmail.com]

Just an update to who ever searches this - you can now use events to change css from the events tab - so just add a mouse over on the tap area and you can select nested elements to change css to