▼
Streaming live at 10am (PST)

Site navigator tracking pane - like photoshops - possible to embed?

Design help Animations & Interactions
#1

Hi All,

I’ve very quickly built this site to show a storyboard layout as a site (as doing it as all one image or a PDF resulted in low quality or forced downsized images)

http://concrete-ui.webflow.com/

So very simply the person looks at the page and they can scroll H and V to see the HD versions of the UI storyboard - in the top right is a basic overview of the storyboard layout (just a static image)

What i’m wondering is how easy is it to add a little square within that top right div that tracks the users location on the site.

Like Photoshops navigator window popup does:

I can’t code at all. :frowning: and I’m showing this to the client tomorrow.

Thanks

Josh

#2

Oh that’s describing me too (:

You know how, when you link to a section with a unique ID, the link gets a focus class when you’re on said section? I don’t know if it would work but if each of your mockup was a section, and if you navigator was a navbar with a grid of links mimicking the sections structure, would it highlight the section you’re on? I really don’t know if this can work but if someone can make it work without coding it’s you :slight_smile:

1 Like
#3

That’s a great idea! I’ll give it a go :slight_smile:

#4

Good idea, sadly didn’t work

http://concrete-ui.webflow.com/

I tried it on the first one - it picks up vertical height exactly as we wanted it to :slight_smile: but sadly not horizontal location so the 1st one stays active even if off screen to right as long as at that level :frowning:

Prob’s not helped by the fact that Webflow wont let me see things horizontally except on the live version

https://preview.webflow.com/preview/concrete-ui?preview=199b3630dc0e61b0a5cc7da162c082ad

#5

I kinda knew this would be an issue… Tried to find another hack but not good idea so far.

#6

Yea i’ve tried a few things but I think we’d need external code to get a little tile to follow your location around :frowning:
Anyone got any ideas?

Thanks!

#7

Hi @vincent - for now i’ve got it like this - so it just highlights the whole row you are on :slight_smile: seems a simple workaround for now - Client meeting got moved to Tuesday so got a bit more time to refine everything!

http://concrete-ui.webflow.com/

#8

Well good job anyway, it’s kind of very cool :smile:

#9

Hey @OvertonGraphics, one solution would be to create “windows”, each 100 width and 100 height and then to use interactions to fade in a segment over the top - see https://webflow.com/website/Focus-TEMPLATE for an example of windows.

Hope this helps!

Arthur

#10

Thanks @Arthur I got a good working solution with the ol’ interactions instead of links solution.

Now whichever image you hover on is the one highlighted in the navigator at top :slight_smile:

CC @vincent

http://concrete-ui.webflow.com/

#11

Aaah, with :hover… so simple, and it works great actually :smile:

#12

The best addition would be to add hover and onclick interaction for the tiles in the right upper corner.

For R2C2
Onhover: make div R2C2 a little darker (opacity 70%)
Onclick: navigate to ID 3 (which you have already made).

Then the navigator is a(lso a true) navigation.

#13

Thanks @Diu

How do I do navigation with OnClick in Interactions?

The reason I don’t have page scrolling as mentioned earlier is that it only scrolls vertical height not horizontally. Would it be possible to scroll H with an Interaction?

I couldn’t see how to navigate the page with an interaction OnClick though.

Cheers!

#14

I’ve been trying to find a way to do that ever since you’ve posted your last results… but I’m falling short of one.

#15

Here’s one, it’s not easy, but doable:

http://demos.flesler.com/jquery/scrollTo/

And maybe, this code could help as well.

#16