Comments (11)
@KevinBeckers I just figured it out! This will give you a slide animation on v0.2.
EPUBJS.Hooks.register('beforeChapterDisplay').pageAnimation = function (callback, renderer) {
window.setTimeout(function () {
var style = renderer.doc.createElement("style");
style.innerHTML = "*{-webkit-transition: transform {t} ease;-moz-transition: tranform {t} ease;-o-transition: transform {t} ease;-ms-transition: transform {t} ease;transition: transform {t} ease;}";
style.innerHTML = style.innerHTML.split("{t}").join("0.5s");
renderer.doc.body.appendChild(style);
}, 100)
if (callback) {
callback();
}
};
from epub.js.
It would be nice if we could build this as a hook or plugin, that way people could decide whether they wanted this or not.
from epub.js.
Yes, I don't know how at this moment, but is the road to take. Anyway we first need to avoid the css column trick to get the two pages layout. I'm trying to get this at https://github.com/lpccoder/epub.js/blob/trying-two-pages/examples/two-pages.html but I have to include some updates to get it working properly. Anyway, any information about how and where the epub.js manages pagination will be sincerely apreciated.
from epub.js.
Having page flipping animations doesn't seem possible without two separate renditions that are synced and support for that still isn't good.
v0.3 switches to an continuous rendering strategy, which at least allows for animation of the pages sliding left and right.
from epub.js.
Is there any news on this subject?
from epub.js.
Also, at the moment, to support desktop and laptop devices, epub.js needs to be patched by adding the following code somewhere before you start using epub.js, but after you load the library. The only difference this makes is that epub.js will use css transforms on desktop devices as well as mobile devices to move the pages.
EPUBJS.Render.Iframe.prototype.setLeft = function(leftPos){
this.docEl.style[this.transform] = 'translate('+ (-leftPos) + 'px, 0)';
}
from epub.js.
Hi,
Does v0.3 support page flip animation?
from epub.js.
Hi there. Nice transition effect, at least it allows the user a cue that the page has flipped. But how to also add the capability for bottom up (and top down) transitions? Oddly enough, some users prefer flicking their finger up/down to turn the pages.
from epub.js.
@lawrence-eka This is not possible in v0.2, as the pagination is achieved with columns the width of the screen. Naturally, columns are horizontal, so what you are asking is not possible. This may be possible in v0.3 though.
from epub.js.
I'm using v0.3 and it renders next page by shifting the visible region of parent div. Need separate divs for each page to achieve effect like https://codepen.io/tailofmoon/pen/JXmvea?page=1& . But will it be a big change in epubjs?
from epub.js.
@pulkitnandan did you get your answer? Because I am using v0.3 as well.
from epub.js.
Related Issues (20)
- What happened to the official website? The content is very strange. HOT 2
- Continuous Manager inside an element that is scrolling that is not the viewport?
- Scripted Content SandBoxing issue, And CFI pages position
- Extracting the text per rendered section / block using epub js? HOT 32
- How do I add a paginated swipe animation?
- highlight not working post integrating with hammer.js for swiping HOT 1
- how to call images in css file? HOT 1
- about rendition.next(), rendition.prev()
- about InlineView
- Minified XML causes 'container.xml not found' HOT 4
- renderTo CSS selector instead of ID HOT 1
- [Bug] Blank page when resize happen during loading
- How to add any emoji on page ?
- How to add any emoji on page? HOT 2
- how to turn the page by wheel
- rapidly scroll up and down will cause error in continuous-scrolled example
- How do I get the text on this page when it is truncated
- fix error File not found in the epub and replace file addresses
- Generate total page locations HOT 2
- Highlight
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from epub.js.