CODEWITHSUNDEEP
javascripthtmlcsscss-transitions
Archana
Archana

Reputation: 99

Scroll image at center and zoom at the center

A set of images are vertically aligned at the center of the page. On keyPress I am able to zoom that image.

For example: If I try to zoom the image which is out of the page, It is zoomed somewhere out of the page or the image is cropped.

All I want to do is, when I keyPress, i wan to make to changes

  1. Make the zoomed image at center of the page.
  2. I want an image to zoom only after the previous image is zoomed back to its position.

My code is http://fiddle.jshell.net/PB49p/

Upvotes: 0

Views: 634

Answers (1)

Sarath
Sarath

Reputation: 9156

One approach is to move the wrapper to adjust the position 

function scrollWrapper(n) {
  var tansvalue  = -150 * (n-1);
  wrapper.setAttribute('style', '-webkit-transform:translate(0,'+tansvalue+'px);');
}

and dely you can adjust with -webkit-transition-delay:

DEMO

Upvotes: 2

Related Questions