impress / impress.js

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

Home Page:http://impress.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Impressjs - change the position the slide is viewed at

CluelessProgrammer12 opened this issue · comments

In impressjs, is there a way one can change that always the center of the Step Element will be viewed?

The documentation for impressjs reads about the positioning of Step Elements: "... Define the pixel based position in which the center of the Step Element will be positioned inside the infinite canvas."

I don't want the center of the Step Element to be positioned in the view, but I'd rather want the view to be more zoomed in and shifted to the left. Now I know that I can achieve this effect by creating an "empty slide" and manually position the view like I want it with an <a href="#somestep"> Tag around that object, but: I've checked this in multiple browsers and it appeared to me, that the resolution of text and pictures doesn't get renewed to be sharp, like when you zoom solely the Step Elements themselves (via the "data-z" attribute).

So how can I position the view of slides while still maintaining high resolution of text and pictures?

Addressing this comment first:

Now I know that I can achieve this effect by creating an "empty slide" and manually position the view like I want it with an <a href="#somestep"> Tag around that object, but: I've checked this in multiple browsers and it appeared to me, that the resolution of text and pictures doesn't get renewed to be sharp, like when you zoom solely the Step Elements themselves (via the "data-z" attribute).

Yes. If you create a big slide with scale="10", then there's loss of resolution. You want a scale="1" slide and just place a really big image/object inside it. See https://openlife.cc/blogs/2017/october/impressjs-howto-slides-over-background-image for more details.

As for the slide being positioned from the center, no, this can't be changed. So what you want to do is to use CSS to ensure the div.step element fills your entire screen. Then you can position content inside the step to be top-left aligned.

I recently added documentation for attributes to div#impress element that are relevant here. In your CSS, you should use pixels for width and height, and imagine that your screen is always the resolution defined by these attributes. Default currently is 1024x768, I intend to change it in the future, but want to advertise these attributes more first. See https://github.com/impress/impress.js/blob/master/DOCUMENTATION.md#root-element