Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 09-20-2024, 05:43 PM   #1
Daniele Giampà
Member
Daniele Giampà began at the beginning.
 
Daniele Giampà's Avatar
 
Posts: 17
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
Daniele Giampà is offline   Reply With Quote
Old 09-21-2024, 09:41 AM   #2
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,611
Karma: 8399999
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Daniele Giampà View Post
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.

Last edited by RbnJrg; 09-22-2024 at 04:59 PM.
RbnJrg is offline   Reply With Quote
Advert
Old 09-23-2024, 11:06 AM   #3
Daniele Giampà
Member
Daniele Giampà began at the beginning.
 
Daniele Giampà's Avatar
 
Posts: 17
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
Click image for larger version

Name:	failed to load resource.jpg
Views:	36
Size:	635.6 KB
ID:	210963   Click image for larger version

Name:	new_tarot.js.png
Views:	33
Size:	984.4 KB
ID:	210964  
Daniele Giampà is offline   Reply With Quote
Old 09-23-2024, 08:02 PM   #4
DNSB
Bibliophagist
DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.
 
DNSB's Avatar
 
Posts: 41,125
Karma: 158160884
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.
DNSB is offline   Reply With Quote
Old 09-24-2024, 12:36 AM   #5
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,611
Karma: 8399999
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Daniele Giampà View Post
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).
RbnJrg is offline   Reply With Quote
Advert
Old 09-24-2024, 12:54 AM   #6
DNSB
Bibliophagist
DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.
 
DNSB's Avatar
 
Posts: 41,125
Karma: 158160884
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
Click image for larger version

Name:	Screenshot 2024-09-23 210022.png
Views:	37
Size:	130.0 KB
ID:	210974  

Last edited by DNSB; 09-24-2024 at 01:01 AM.
DNSB is offline   Reply With Quote
Old 09-24-2024, 01:42 PM   #7
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,611
Karma: 8399999
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.

Click image for larger version

Name:	Scroll1.jpg
Views:	36
Size:	45.4 KB
ID:	210980Click image for larger version

Name:	Scroll2.jpg
Views:	35
Size:	44.7 KB
ID:	210981Click image for larger version

Name:	Scroll3.jpg
Views:	33
Size:	42.1 KB
ID:	210982Click image for larger version

Name:	Scroll4.jpg
Views:	33
Size:	42.6 KB
ID:	210983Click image for larger version

Name:	Scroll5.jpg
Views:	33
Size:	41.3 KB
ID:	210984
RbnJrg is offline   Reply With Quote
Old 09-24-2024, 04:15 PM   #8
Daniele Giampà
Member
Daniele Giampà began at the beginning.
 
Daniele Giampà's Avatar
 
Posts: 17
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
Click image for larger version

Name:	T2F_scrolling.png
Views:	27
Size:	952.1 KB
ID:	210986  
Daniele Giampà is offline   Reply With Quote
Old 09-24-2024, 05:17 PM   #9
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,611
Karma: 8399999
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Daniele Giampà View Post
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

Last edited by RbnJrg; 09-24-2024 at 05:21 PM.
RbnJrg is offline   Reply With Quote
Old 11-01-2024, 01:43 PM   #10
Daniele Giampà
Member
Daniele Giampà began at the beginning.
 
Daniele Giampà's Avatar
 
Posts: 17
Karma: 20
Join Date: Jan 2024
Location: London
Device: none
Hello

I have been playing a little with the animation, and I am afraid there are still two issues.

1) I have a hard time finding the right size for the card box. It is always either too high or too small.

2) The texts linked to each card don't appear when scrolling. I can scroll the part with the cards and the texts, but they don't move simultaneously.

The idea behind this work is that the cards generate text related to it. The various texts should, therefore, be invisible and only turn visible when the respective card appears in the card box.

I have uploaded the latest version of this work on my web page https://edgedpub.com/sample_work_7.php

Many thanks for your help.

Daniele
Daniele Giampà is offline   Reply With Quote
Old 11-02-2024, 06:23 PM   #11
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,611
Karma: 8399999
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Daniele Giampà View Post
Hello

I have been playing a little with the animation, and I am afraid there are still two issues.

1) I have a hard time finding the right size for the card box. It is always either too high or too small.

2) The texts linked to each card don't appear when scrolling. I can scroll the part with the cards and the texts, but they don't move simultaneously.

The idea behind this work is that the cards generate text related to it. The various texts should, therefore, be invisible and only turn visible when the respective card appears in the card box.

I have uploaded the latest version of this work on my web page https://edgedpub.com/sample_work_7.php

Many thanks for your help.

Daniele
And what about I posted in:

https://www.mobileread.com/forums/sh...26&postcount=7

As I said, things that work on a web page, they can not work under epub. This is one of those cases. In my solution images and text are sync, that is problematic in an epub with the original js.
RbnJrg is offline   Reply With Quote
Old 11-04-2024, 10:00 PM   #12
Daniele Giampà
Member
Daniele Giampà began at the beginning.
 
Daniele Giampà's Avatar
 
Posts: 17
Karma: 20
Join Date: Jan 2024
Location: London
Device: none
Thank you, Ruben.
I have good and bad news.

I edited the code using Cursor AI Code Editor and the animation in Chapter 1 works. It was a matter of finding the right dimensions for the container and the cards.

I then created a new animation for Chapter 2 using Cursor, but somehow the functions of the two chapters got mixed and I had to stop.

The animation in Chapter 2 is click-based and the first card appears on the reverse side. When clicked, the card turns, the corresponding text appears and the next card appears on the reverse side. The animation goes on and on in this same way.

I could use just one animation, but it is too much fun to experiment with the EPUB3 format.
Daniele Giampà is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Page Animation gone? Maverynthia Viewer 3 06-10-2021 08:25 AM
Is there a way to disable the animation? MarjaE Calibre Companion 2 12-11-2020 06:59 PM
ibooks and animation corblimey ePub 1 03-07-2014 06:48 PM
Animation in ebook LooneyAnimator General Discussions 3 12-15-2013 06:15 PM
IQ Adroid animation just keeps going. UrbanNightmare PocketBook 8 03-08-2011 06:17 PM


All times are GMT -4. The time now is 05:05 AM.


MobileRead.com is a privately owned, operated and funded community.