0

i'm trying to create the same nice effect of and overlayed arrow (ie desktop version of chrome) when you swipe left or right in for a mobile browser.

I use javascript and jQuery and for now i can show the arrow when I swipe. I managed to have the distance of the swipe but i can't find a way to link the two so i only show a portion of the arrow in relation with the distance !

$('#arrow').show('slide',{direction: 'right'},1000);
$('#arrow').fadeIn();
$('#arrow').fadeOut();

I'm trying to do it also with animate() but i'm still stuck :S

Thanks for the help

user910865
  • 1
  • 1

1 Answers1

0

You'll need three values: start, end, current.

In your case, you'll need to determine what is the start end value.

I would say use the width of your swipe-able area (screen), which would give you 0 and x (where x is the width of your swipe-able area). You already have current, which is the distance between start and and where your actual swipe ends (width of swipe, perhaps?).

Once you have those values, you can derive a percentage (between 0 and 1) and apply it to your arrow using @mikakun's suggestion. The arrow graphic will either need to be absolutely positioned in the container or set as a background image of the container. That will give you the effect of only seeing a percentage of the arrow as the container expands to reveal more. A nice effect would be to have a semi-transparent/greyed out duplicate of the full arrow in behind the one you are revealing.

user916011
  • 505
  • 5
  • 8