JavaScript animation

Daniele Giampà · 09-20-2024, 04:43 PM

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

RbnJrg · 09-21-2024, 08:41 AM

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.

Daniele Giampà · 09-23-2024, 10:06 AM

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

DNSB · 09-23-2024, 07:02 PM

One item that may be causing issues is that you are creating an ePub2 document and JavaScript support was added in ePub3.

RbnJrg · 09-23-2024, 11:36 PM

Quote:

Originally Posted by Daniele Giampà

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

Yes, what DNSB said is the cause of your issue. You have built your epub as epub2 and javascript is only supported by epub3

Also, in your class "tarot-card" you have the following property:

Code:

height: vh15;

That won't work

You should use:

Code:

height: 15vh;

With the above property, you will have defined the height of the section to scroll as 15% of the height of the screen. Also change the height in the "text-section" class as "height: 15vh" (without quotes of course).

DNSB · 09-23-2024, 11:54 PM

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.

RbnJrg · 09-24-2024, 12:42 PM

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.

Click image for larger version

Name: Scroll1.jpg
Views: 21
Size: 45.4 KB
ID: 210980

Click image for larger version

Name: Scroll2.jpg
Views: 21
Size: 44.7 KB
ID: 210981

Click image for larger version

Name: Scroll3.jpg
Views: 18
Size: 42.1 KB
ID: 210982

Click image for larger version

Name: Scroll4.jpg
Views: 18
Size: 42.6 KB
ID: 210983

Click image for larger version

Name: Scroll5.jpg
Views: 19
Size: 41.3 KB
ID: 210984

Daniele Giampà · 09-24-2024, 03:15 PM

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!

RbnJrg · 09-24-2024, 04:17 PM

Quote:

Originally Posted by Daniele Giampà

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!

The method you employed needs more tunning to be implemented on epub; it can work fine on web pages but on epubs you also.would need to add a sync between the two scrolling. Watch the alternative method I posted, that works fine on epubs, and also sync the scrolling of the cards and the asociated text. Because of the sync, you don't need to hide text.

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

09-20-2024, 04:43 PM	#1
Daniele Giampà 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-23-2024, 10:06 AM	#3
Daniele Giampà 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 Attached Thumbnails

09-23-2024, 11:54 PM	#6
DNSB Bibliophagist Posts: 40,013 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. Attached Thumbnails Last edited by DNSB; 09-24-2024 at 12:01 AM.

09-24-2024, 03:15 PM	#8
Daniele Giampà 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! Attached Thumbnails

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

09-23-2024, 07:02 PM	#4
DNSB Bibliophagist Posts: 40,013 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-24-2024, 12:42 PM	#7
RbnJrg 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.

Advert

Advert