Need help with image click and drag effect ( possible javascript solution? )

Discussion in 'HTML & Website Design' started by Potatrick, Apr 12, 2014.

0
  1. #1
    I want to have 2 of the same image stacked on top of each other. 1 grayscale, and 1 color. Then I want to have a bar or some object that a user can click and drag from top to bottom to "wipe" the grayscale image away and reveal the color image. I would also like to make it so this effect happens over "x" amount of seconds, and the user can click and drag it just to make it happen faster.

    I know I can do it in Flash, but I'd prefer an HTML/CSS/JS solution. My Javascript skills aren't great, but if someone could point me in the right direction, I'm sure I could figure the rest out. Thanks
     
    Potatrick, Apr 12, 2014 IP
  2. ez-designs

    ez-designs Well-Known Member

    Messages:
    230
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    105
    #2
    Hi,

    You can do this with jQuery: http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/

    Here are some examples: http://www.catchmyfame.com/jquery/demo/8/
     
    ez-designs, Apr 14, 2014 IP