629f7686f3
The relative position in rel plugin is currently based on the world coordinate. So for the same effect, like fly in from the right-hand side, we must use different `data-rel-x/y/z` value. Why not let the plugin do the hard part? So I introduce a `data-rel-position`, when set to `relative`, all relative attribute is based on the position and rotation of previous slide. So no matter the rotation of previous slide, data-rel-x="1000" always looks like fly in from the right-hand side. We can change the position and rotation of one slide, and the position of all following slides will be changed too. When `data-rel-position` is set to `relative`, relative rotation has a clear meaning. It describes the relative rotations between slides. We don't need to set rotations for all slide, setting the key slides is enough. If `data-rel-position` is not relative, the effect of `data-rel-rotate-x/y/z` is not clear, so they're only used when `data-rel-position="relative"`. After the introduction of relative rotation, there're 6 attribute that will inherit from previous slide. If we want to set a relative X move, we have to set all other 5 attributes to 0. It's boring. So a `data-rel-clear` is used to set all 6 attributes to 0, and then the value specified in current slide is applied. The `examples/3D-positions/index.html` shows some usage. As you can see, the html code of two slide ring is the same, and slides except for the first two in a ring has no position attributes. It work by inheriting the previous one. This PR invokes a lot math calculations. Basically, the rotation of a slide is translated into the coordinate describing the directions of X/Y/Z axes. And `data-rel-x/y/z` can be easily calculated by that. The rotations is the hard part, I mainly use the algorithm in the Quaternions and spatial rotation - Wikipedia to compose two and more rotations. I'm not a math guy, hope I don't make much mistakes.
47 lines
1.3 KiB
JSON
47 lines
1.3 KiB
JSON
{
|
|
"name": "impress.js",
|
|
"version": "1.1.0",
|
|
"description": "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.",
|
|
"main": "js/impress.js",
|
|
"repository": {
|
|
"type": "git",
|
|
"url": "https://github.com/impress/impress.js.git"
|
|
},
|
|
"keywords": [
|
|
"presentation",
|
|
"slides",
|
|
"slideshow",
|
|
"css3",
|
|
"transitions",
|
|
"transforms",
|
|
"browser"
|
|
],
|
|
"author": "Bartek Szopka",
|
|
"license": "MIT",
|
|
"bugs": {
|
|
"url": "https://github.com/impress/impress.js/issues"
|
|
},
|
|
"scripts": {
|
|
"all": "npm run build && npm run test && npm run lint",
|
|
"build": "node build.js",
|
|
"lint": "npm exec -- jshint src test/*.js && npm exec -- jscs src test/*.js",
|
|
"new-lint": "npm exec -- eslint src test",
|
|
"test": "npm exec -- karma start --log-level debug --single-run=true"
|
|
},
|
|
"devDependencies": {
|
|
"eslint": "^6.8.0",
|
|
"jscs": "^3.0.7",
|
|
"jshint": "^2.11.0",
|
|
"karma": "^4.4.1",
|
|
"karma-chrome-launcher": "^3.1.0",
|
|
"karma-firefox-launcher": "^1.3.0",
|
|
"karma-qunit": "^4.0.0",
|
|
"ls": "^0.2.1",
|
|
"puppeteer": "^2.1.1",
|
|
"qunit": "^2.9.3",
|
|
"qunit-assert-close": "^2.1.2",
|
|
"syn": "^0.14.1",
|
|
"terser": "^4.6.7"
|
|
}
|
|
}
|