Can Foundation Framer do this...


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


Senior Advisor
11,007 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/



Registered User
434 posts
Online Now

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.
Break on through to the other side


Registered User
118 posts

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

-wmfx


Senior Advisor
17,827 posts
Online Now

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


Registered User
208 posts
Online Now

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


Registered User
434 posts
Online Now

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 ?
Break on through to the other side


Registered User
434 posts
Online Now

Oh, I see it now in the inspector....inline css in the head. Thanks !
Break on through to the other side


Registered User
208 posts
Online Now

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 :/


Registered User
434 posts
Online Now

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 ?
Break on through to the other side

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.