Responsive reveal of picture

1

@h_classen always creates beautiful work, but it’s always too complicated for me to understand :frowning:

He created a responsive reveal: LINK

I’ve been thinking about making something similar, but I need the line to start in the middle so it can be dragged left/right. I also want to have other information around the edges, hence why it’s in the middle:

reveal.hype.zip (907.5 KB)

2

@ExtraBacon

Here is a non-coding example just using a timeline & the Hype interface; which utilizes mouse clicks on the arrowheads.

Project Here: Compare_JHS-v1.hype.zip (344.6 KB) - Demo Here.

The manual drag is where the problem crops up as I am using the “On Drag” command which has shown issues with flexible designs. Still works - but it isn’t slick - no matter what speed You set it to. Instead, I think the solution here might be to get the mouse location “On Mouse Down” ~ “Touch Start” and set the width of the "Overlay"group (please see image at bottom) to match the mouse’s horizontal location as it is dragging. In my vision the “Divider Bar” would not jump to the exact mouse position, it would simple track it - e.g. the mouse is dragged horizontally 50 pixels to the left the “Divider Bar” moves 50 pixels to the left. I think this would be a nicer effect than a sudden jump of the “Divider Bar” to the mouse location, assuming it was not on the “Divider Bar” to begin with.

I’m out of time right now but this “drag” solution will require a bit of JavaScript. Two ideas (which I’ve never worked with before)…

The one mentioned just above using the addEventListener for the (horizontal) mouse movement: “onmousemove Event”.

Another avenue that might prove productive would be to track the horizontal mouse movement and match it to the timeline. I’m believe I’ve read about this on the Forum, but no time to research just now.

Edit: Found one post that looks like it covers the mouse-timeline topic, haven’t examined yet…
Control mouse of main timeline

Edit :
Another thought about using the “mouse move”~ timeline sync. You would probably want to create another timeline which did not have the arrowheads show up in the center when You were dragging (as does the current one, called “Slider”). Also, another nice effect would be to have the “Divider Bar” animate (glide) to the spot where the user clicked in the image.


The "Divider Bar" - the right border of the "Overlay Group"
2 Likes
3

Thank you so much!
I have added H_classen’s resize JS to it and it’s cause a strange problem with moving the bar. It still works, but the smaller the screen gets the more you have to drag the bar for it to move.

Compare_JHS-v1.hype.zip (404.2 KB)

4

controlling a timeline via drag gives you the opportunity to to choose a speed-property. this is constant. which means that the drag is not 1to1-corresponding to the timeline …
you’ve got to write a own js-control to avoid this.

1 Like
5

@ExtraBacon

Here's some things to get You going regarding the drag issue:

===============================================

A thread addressing the drag issue with objects not following accurately:


The documentation for Hype's Drag API here.

You will note there is a link to a thread at the bottom of this Drag API section:

Using the X and Y position events above allows you to create draggable elements constrained within a defined area. Example here.

This thread features one of this Forum's Most Valuable Resources: @h_classen

Here is Han's associated file that shows up in the thread further down - thought I'd save You the work ;->
dragMe.hype.zip (10.8 KB)


I know, I know - Han's coding!!! (But what would we do without him?)

@h_classen always creates beautiful work, but it's always too complicated for me to understand :frowning:

However, if You sit with this code a bit (or a while), You will see that it can be followed (even I could do it!).

The main thing we are interested in is the "X" (horizontal) position of the drag:


So to adapt the code for horizontal constraint only (as per @h_classen in the same thread):

and ... you can easily adapt those lines for

contained horizontal drag

c = [100, 400];

p = element.parentNode;
pX = p.getBoundingClientRect().left;
gX = event['hypeGestureXPosition'];
eW = element.getBoundingClientRect().width;
c[1] = c[1] + eW;
nX = gX - pX - (eW/2);

if(nX > c[0] && nX < c[1])
{
element.style.left = nX + 'px';
}

6

Hi Hans

Is there an easy way to add the words ‘Before’ and ‘After’ which would appear once you reveal a larger part of one of the images? I tried doing it with a timeline animation but failed miserably.

Example here: https://codyhouse.co/demo/image-comparison-slider/index.html

Thanks for your help.