Streaming live at 10am (PST)

Div follows mouse x horizontally & based on VH

Hello guys, couldn’t find any topic on this.

I want to have a div to slide (left <-> right) according to where my mouse X is.
I managed that part, but I also want it to be responsive.

So no matter the value of VH, the div always only slide left until it’s right edge reach the viewport edge. I thought setting: MyDiv width = amount in VH would do the trick, but it doesn’t.

Probably need, in the interaction panel, to set the amount of displacement to be:
Mouse X 100% = MyDiv width in VH. But that’s not possible.

If anybody can help would be greatly appreciated!
The slider is at the bottom of the page in my shared link.

Cheers


Here is my public share link: LINK
(how to access public share link)

Bringing this up from it’s grave…
Anybody could help?
I’m sure people have designed this already.

Very simple:

How to have a full width horizontal sliding panorama that is responsive no matter it’s size and no matter the view port size?

Thanks!

Hi, @Philemon!

Let me ask you few more details before trying to figure out the solution.

  1. The “panorama” div has width more than 100% viewport?
  2. This “panorama” should move only horizontally?
  3. When mouse move to the right, the “panorama” moves to the left?

Hey Sabanna thanks for the reply!

1: Yes
2: Yes
3: Yes (When MouseX = 0, panorama is aligned to the left of the viewport, when mouseX=100 panorama end up aligning the right side of the viewport)

I’ll share a preview link so you can have a look :slight_smile: (Panorama is at the bottom of the page)

1 Like

Great design, @Philemon!

I think the only way to solve this problem is to know that “panorama” div width. It can be viewport width or percentage of the parent (which is pretty much the same in this situation).

It looks like you have similar layouts on the other pages, but width of that “panorama” div is different (based on the slides width and their quantity). If you know that slides aspect ratio is constant (for example, 45vh x 80vh) then you could calculate the “panorama” div width accordingly.

Basically, you need to know what distance “panorama” should move. Without knowing the width of the div it is not possible to set any value that would work “universally”.

Another unpredictable part would be assuming the width of the browser page based on the VH. You can’t know what screen user looking at how that user prefer to keep his browser window located/sized. So I would advise rely on VW or percentage in this case.