Quote:
Originally Posted by Daniele Giampà
Hello
I want to create a scroll animation for an EPUB3 e-book.
The animation activates a tarot card that generates a text.
I have a web version here: https://www.edgedpub.com/The_Two_Fis...chapter-2.html
I copied the code files into an EPUB3 document and edited them.
According to EPUB Checker, there aren't any mistakes.
Sadly, the JS animation doesn't work. I can't scroll and the cards don't generate the texts.
See the EPUB3 document here: https://edgedpub.com/sample_work_7.php
Many thanks
Daniele |
I answered your question yesterday but I don't know why my answer was deleted. I will write again what I wrote.
Your script doesn't work because has errors. If you open your epub in -for example- Sigil and select the chapter_01.xhtml file and enable the "Inspector", you'll see the errors. Instead of your script, you should use something like:
1) At the beggining of the script:
Code:
window.addEventListener("load", Starting);
2) After that, you have to define the Starting function; something like:
Code:
function Starting() {
var element = document.querySelector(".tarot-cards");
element.addEventListener("scroll", myScrollFunction);
window.removeEventListener("load", Starting);
}
3) After that, you need to define your myScrollFunction:
Code:
function myScrollFunction() {
let textContents = document.querySelectorAll(".text-content");
textContents.forEach(function (content, index) {
let card = document.querySelector(".tarot-cards").children[index];
let rect = card.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom >= 0) {
content.classList.add("active");
}
else {
content.classList.remove("active");
}
});
}
4) Finally, delete in chapter_01.xhtml file the <script>...</script> tag at the end, and instead of that, link the script at the [head] section with:
Code:
<script type="text/javascript" src="../Misc/tarot.js" ></script>
Also, the "tarot-cards" class is not well defined. You should use, instead of "%", to employ "vh" to define heights (also in your "text-content" class). And also you'll have issues with the margins and height you are using; try with the property "box-sizing: border-box". And maybe is not the better to apply the property "display: flex" also to <body>; maybe it could be a better idea to employ for "tarot-cards" a grid of two columns (one for images and one for the text). Things that work nice on html pages, they can not work properly under epub.