search

jmpressjs / jmpress.js

A jQuery plugin to build a website on the infinite canvas
http://jmpressjs.github.com/jmpress.js
1.5k stars 237 forks source link

Use transformOrigin parameter #98

Closed PhilippHomann closed 10 years ago

PhilippHomann commented 11 years ago

Hi, I don't want my slide being centered vertically/horizontally.

I found the animation.transformOrigin parameter on http://jmpressjs.github.com/docs/core.html. I changed it to "center right".

But unfortunately it doesn't work, because the parameter isn't used by jmpress.js (I was not able to find any use in the source)

Would be nice whether this is getting implemented!

sokra commented 11 years ago

I've read the issue, but currently have no fast solution. This is more difficult than it seems.

PhilippHomann commented 11 years ago

I found a solution for me. I changed this value: https://github.com/jmpressjs/jmpress.js/blob/master/src/components/core.js#L601 to 57% or something. So my slide was moved to the right on the screen instead of being centered

sokra commented 11 years ago

ok that's cool.

The problem is that jmpress does not know the size of the slides and every slide could have a different size. So it is not so easy.

parliament718 commented 10 years ago

I ran into this issue as well. I'm looking for a way to render each new step after the previous, that is, under it vertically with the top of the new step lining up to bottom of the previous step. It should still center on the next step though, so I'm not sure if transformOrigin is the right place to start. What/where is a good way to implement this?

sokra commented 10 years ago

@parliament718 Just add the slide height to the y-position of the next slide and you get this effect.

sokra commented 10 years ago

http://jmpressjs.github.io/docs/core.html

property originX and originY

Set the alignment of the steps inside the container. The default is 50% 50% which centers the steps.

$('#jmpress').jmpress({
    originX: "0%",
    originY: "100%"
    // Steps are aligned to the bottom left corner.
});