2

Where can I find a library/what is a good way of implementing the following:

User clicks through to the website, and is presented with a picture associated with an item. They press the left arrow key, and the picture is discarded, or they press the right arrow key, and the picture (and item) is saved.

Another picture then pops up for them to decide on.

So kinda like Tinder, but in a browser, and with arrow keys rather than swiping. Thanks!

HLH
  • 1,097
  • 4
  • 15
  • 22

1 Answers1

2

You want keypress listeners: Detecting arrow key presses in JavaScript

and then animation libraries. you can simply use jquery's animate(), (http://www.w3schools.com/jquery/eff_animate.asp) which basically allows you to change css properties and tell it how long you want it to take to move from one position to the next e.g.:

$("img").animate({left-margin: $(window).width()}, 3000);

will take 3 seconds to move your image from its position all the way right and off the screen.

If you want something fancier, you can find a couple animation libraries on this list that might work for you, but a bunch of them are going to be heavier duty than you need: http://www.jquery4u.com/animation/10-super-javascript-animation-frameworks/

Community
  • 1
  • 1
eriese
  • 175
  • 7