Can Foundation Framer do this...

User 2022095 Photo


Registered User
118 posts

Anyone know if foundation framer do this: https://miketricking.github.io/dist/
If so can someone explain how this or something similar can be achieved.
Thanks,
-wmfx
User 122279 Photo


Senior Advisor
11,228 posts

My guess is that RFF can do it. I haven't checked all the effects, but the ones I did check didn't look too difficult. Since I haven't actually tried creating one of them, I won't be able to explain, but of course one easy option would be to use a html element for the html and then create a separate css file with the given css and then add it.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RSD, RFF and RBB: http://www.horgenhonning.net/sharing/


User 244626 Photo


Registered User
530 posts

I have been looking at this recently too because it is a very common effect. The link you gave for example works well on my desktop but does not on mobile.

You can use two containers, one set to relative and the other to absolute so it sits over the first. Then add your objects and text to individual containers and use the hover state to change the opacity effect. Add your transitions in too. I am not sure about the fix for mobile though.... no hover.

You would have to use RSD 2.0 to utilize things like blur effects and the others available.

Or you could search for a plugin Philter and add it.
User 2022095 Photo


Registered User
118 posts

Inger, Twinstream thank you both.
hum... no hover on mobile devices. ooh well!

-wmfx
User 187934 Photo


Senior Advisor
18,023 posts

Actually you can get hover to work on touch devices.
If you apply the active Pseudo after the hover it will work on touch devices.

I tested it in RSD and it seemed worked fine on my touch screen laptop and iphone.
http://ericrohloff.com/coffeecup/ccforu … howbutton/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 2147646 Photo


Registered User
213 posts

Hi Eric, it seems to work but there is no way to click the action button. So it would be a good way to display extra content, but not if it contains links :)

User 244626 Photo


Registered User
530 posts

Since on mobile devices the pictures take up the full screen a scrolltrigger may be more effective at the lower breakpoints rather than hover which could still be used at the higher breakpoints.

Eric, were you able to add the active Pseudo after the hover some way in RSD, inline css in the head, or custom css file ? or was it a hard main.css edit ?
User 244626 Photo


Registered User
530 posts

Oh, I see it now in the inspector....inline css in the head. Thanks !
User 2147646 Photo


Registered User
213 posts

jamo wrote:
Hi Eric, it seems to work but there is no way to click the action button. So it would be a good way to display extra content, but not if it contains links :)
Thinking about it again maybe the button is to reveal the text? But for me the text is loaded to begin and then the button is revealed on touch :/

User 244626 Photo


Registered User
530 posts

Returning to the first question of hover effects. I can make a simple hover effect which consists of a picture and a heading that slides down into view over the picture on hover.

Where it starts becoming more complicated is where you add in individual elements that require hover input control to transition over the picture.

On the net they describe overlays or box that gets the hover command and then that is controlling transitions of the other elements sliding in, fading in, color, opacity, etc.

Is there anyway to target these elements from the hover command on the main box from within RSD, FF, BS ? or does one have to use custom css or js to accomplish this ?

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.