09-20-2024, 04:43 PM | #1 |
Member
Posts: 15
Karma: 20
Join Date: Jan 2024
Location: London
Device: none
|
JavaScript animation
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 |
09-21-2024, 08:41 AM | #2 | |
Wizard
Posts: 1,606
Karma: 8291219
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
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); Code:
function Starting() { var element = document.querySelector(".tarot-cards"); element.addEventListener("scroll", myScrollFunction); window.removeEventListener("load", Starting); } 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"); } }); } Code:
<script type="text/javascript" src="../Misc/tarot.js" ></script> Last edited by RbnJrg; 09-22-2024 at 03:59 PM. |
|
Advert | |
|
09-23-2024, 10:06 AM | #3 |
Member
Posts: 15
Karma: 20
Join Date: Jan 2024
Location: London
Device: none
|
Thank you for your help!
I edited the files, but I am afraid the scroll animation is not working. Also, in the console, I read: failed to load resource... Please, see the screenshots attached. The new version is here: https://edgedpub.com/sample_work_7.php |
09-23-2024, 07:02 PM | #4 |
Bibliophagist
Posts: 40,016
Karma: 154919858
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
One item that may be causing issues is that you are creating an ePub2 document and JavaScript support was added in ePub3.
|
09-23-2024, 11:36 PM | #5 | |
Wizard
Posts: 1,606
Karma: 8291219
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Also, in your class "tarot-card" you have the following property: Code:
height: vh15; Code:
height: 15vh; |
|
Advert | |
|
09-23-2024, 11:54 PM | #6 |
Bibliophagist
Posts: 40,016
Karma: 154919858
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
After using Sigil's ePub2 to ePub3 conversion tool and correcting the vh15 to 15vh, it does seem to work in Sigil's preview window and Thorium but the card size seems rather small. I ended up increasing to 25% and 40vh in the CSS style.
I've attached an image from Sigil's preview screen of what I see. Last edited by DNSB; 09-24-2024 at 12:01 AM. |
09-24-2024, 12:42 PM | #7 |
Wizard
Posts: 1,606
Karma: 8291219
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
My solution:
The_Two_Fishermen (1)_epub3.epub This is an epub3 (with only the chapter_01.xhtml file in sake of simplicity), that shows an alternative method to do the things. |
09-24-2024, 03:15 PM | #8 |
Member
Posts: 15
Karma: 20
Join Date: Jan 2024
Location: London
Device: none
|
Bummer! I didn't see that it's epub.02
Where is the format converter in Sigil? I modified my files. It's working now. I am just struggling with the scrolling. It stops after the second card. Many thanks! |
09-24-2024, 04:17 PM | #9 | |
Wizard
Posts: 1,606
Karma: 8291219
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
To convert an epub2 to epub3 in Sigil you need to install the epub3-itizer plugin. https://www.mobileread.com/forums/sh....php?p=2973066 Last edited by RbnJrg; 09-24-2024 at 04:21 PM. |
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Page Animation gone? | Maverynthia | Viewer | 3 | 06-10-2021 07:25 AM |
Is there a way to disable the animation? | MarjaE | Calibre Companion | 2 | 12-11-2020 05:59 PM |
ibooks and animation | corblimey | ePub | 1 | 03-07-2014 05:48 PM |
Animation in ebook | LooneyAnimator | General Discussions | 3 | 12-15-2013 05:15 PM |
IQ Adroid animation just keeps going. | UrbanNightmare | PocketBook | 8 | 03-08-2011 05:17 PM |