Highlighted

Rollover/scroll effects mobile site

Explorer ,
Feb 14, 2018

Copy link to clipboard

Copied

Hi there,

I'm building a mobile site on adobe muse at the moment. I am trying to recreate this type of hover/scroll effect as seen on this mobile site https://www.emertumilty.com/ (it's a rollover on desktop and some type of scroll effect on mobile)

I am specifically referring to how the picture turns to text as you continue to scroll on the homepage on a phone. I realise this is not a Muse site.

Does anyone know how I would achieve this?

Thank you

There are no scrolling effects. When you look on the phone - it's just a glitch because it works hover effect from touching your fingers.

This can be done from the state button and a text frame with a background fill inside it. In the standard state, the text frame has 0% opacity, in the hover state 100% opacity. That's all there is to it.

Views

988

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Rollover/scroll effects mobile site

Explorer ,
Feb 14, 2018

Copy link to clipboard

Copied

Hi there,

I'm building a mobile site on adobe muse at the moment. I am trying to recreate this type of hover/scroll effect as seen on this mobile site https://www.emertumilty.com/ (it's a rollover on desktop and some type of scroll effect on mobile)

I am specifically referring to how the picture turns to text as you continue to scroll on the homepage on a phone. I realise this is not a Muse site.

Does anyone know how I would achieve this?

Thank you

There are no scrolling effects. When you look on the phone - it's just a glitch because it works hover effect from touching your fingers.

This can be done from the state button and a text frame with a background fill inside it. In the standard state, the text frame has 0% opacity, in the hover state 100% opacity. That's all there is to it.

Views

989

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 14, 2018 0
Guide ,
Feb 14, 2018

Copy link to clipboard

Copied

There are no scrolling effects. When you look on the phone - it's just a glitch because it works hover effect from touching your fingers.

This can be done from the state button and a text frame with a background fill inside it. In the standard state, the text frame has 0% opacity, in the hover state 100% opacity. That's all there is to it.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 14, 2018 2
Explorer ,
Feb 15, 2018

Copy link to clipboard

Copied

Thank you!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 15, 2018 0
LEGEND ,
Feb 15, 2018

Copy link to clipboard

Copied

In addition to Pavel Homeriki​:

Have a close look at this .muse sample file and preview it in browser. It demonstrates, how these effects are created:

https://www.dropbox.com/s/fdlm9g9lrrbjmui/interactive-triggers.muse?dl=0

https://www.dropbox.com/s/fdlm9g9lrrbjmui/interactive-triggers.muse?dl=0If you can’t find out, how it is made – please ask!

(As Pavel already stated: Hover effects aren’t possible on touch devices, because they don’t know a hover state.)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 15, 2018 3
Community Beginner ,
Mar 14, 2018

Copy link to clipboard

Copied

I was looking for someone to help explain how mobile states compare to desktop states & your response has helped! 

Few q's: Based on previewing the provided mobile site above, it looks like the hover state is when a person touches the image but doesn't actually tap it.  Is hover the same as rollover?

Are these behaviors accurate?

     Normal - scrolling through with no touch to image

     Rollover - scrolling with touch to image

     Mouse Down - tapping

     Active - *What does active look like on a mobile?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 14, 2018 0