Fixed Position header and animation problems

Question

I have just constructed my first single-page website but have run into some problems.

1. I have animated the first page and the E-Pub version looks fine but the HTML version isn't matching.

2. I have fixed the position of the header and nav buttons, but when calling the pages the top of each page scrolls under the header instead of stopping at it.

Link to files: https://www.dropbox.com/sh/k4z0v05528xoe9b/AABSJdMfqv35HT-ExhPtiqh1a?dl=0

Answer 1

Adobe's EPUB preview renders content differently from in5. The EPUB preview does not support in5's Fixed Position Element. What I see in the Epub preview is no header on subsequent pages. If that's how you'd like for it to look, then you can deselect Fixed Position Element to have the header appear on only the first page.

If you use Fixed Position Element and want the content to appear below it, move the content down on each page to accommodate the height of the menu. When the Fixed Position Element is applied to the header, it fixes the position of that header over each page. It won't push the content down the subsequent pages.

Comments

Hi Myra, yep I did want to keep the header fixed for all pages and finally worked out that I needed to have a matching head margin, so I am happy with that now. However, I seem to be stuck with the animation on the first page. Whatever I do seems to preview correctly but the HTML result doesn't match. Specifically in the forge fire and horseshoes element. It seems to get into a loop somehow. It should go, fade in fire, then fade in shoes. But I am getting the shoes appearing briefly, then the fire comes in, then the shoes appear again. Try as I might I can't seem to get around that.

---

I noticed that Parallax Background (in5 > Interactive Widgets > Parallax Background) was applied to the fire image, so I removed that. Then I ungrouped the horseshoe images, applied the animation to each of them with the duration of 1.75 and with Hide Until Animated selected like it was for the group. In the Timing panel, I set the delay for each of the shoe animations to .75 seconds like it was for the group, and I selected both shoes and linked them so that they would play together (see Creating Sequences of Multiple Animations in this Animation lesson). Then the animation plays like you described you want it.

---

Fantastic Myra, thanks for the solution and the link to the tutorial. I really appreciate the swift responses. Looking forward to creating some more pieces that really interact with our customers!

---

I'm glad I could help. :)

---

This is related, but qq: can a video object be used for a parallax background? Can a video element be used for a fixed position element? Thanks!
e

---

You can place a video and apply either parallax background or fixed position element to it.

If you apply fixed position element, be aware that the video object is no longer in the flow of the document which means it isn't actually on a page. If it isn't on a page, then it can't auto play on page load. The user would need to click the video to make it play.