Index Page

I have a temporary need to have an Index page temporarily load for a few seconds with a humorous advertisement for the company then either slide off, fade into the proper index page or something similar.

Thought I had it worked out using the Web Page Properties → Page Transition → Page. Really didn't work. I thought there was a way to do this... perhaps it's coding? Found Page Transition in the manual. Thought I followed the steps. Obviously a "t" wasn't crossed or the "i" wasn't dotted... or this is not what I thought it was for.

Any thoughts? Thanks

Oh yes, Designer Pro X 18 desktop version.

Quote:

---

Originally Posted by R Duane

I have a temporary need to have an Index page temporarily load for a few seconds with a humorous advertisement for the company then either slide off, fade into the proper index page or something similar.

Thought I had it worked out using the Web Page Properties → Page Transition → Page. Really didn't work. I thought there was a way to do this... perhaps it's coding? Found Page Transition in the manual. Thought I followed the steps. Obviously a "t" wasn't crossed or the "i" wasn't dotted... or this is not what I thought it was for.

Any thoughts? Thanks

Oh yes, Designer Pro X 18 desktop version.

---

Currently busy but this approach, using a Pop-up layer, should still be OK: https://www.talkgraphics.com/showthr...619#post499619.

Acorn

Thanks for your quick reply... will give it a try.

Here is a pure CSS solution that has a bit of everything: Attachment 134780

Give all objects in the ad then ClassName of htmlclass="advertisement", using Utilities > Names.
In the index Page Head, insert this CSS:

Code:

---

<style>
.advertisement {
  opacity: 0;
  animation: present 5s ease-in-out;
}

@keyframes present {
  0% { opacity: 0; }
  15%, 75% { opacity: 1; transform: translateX(0%); }
  100% { opacity: 0; transform: translateX(100%) scale(0.25) rotate(360deg); }
}
</style>

---

Remove all transform statements to just have a fade in and out effect.
The overall timing is the 5s (5 seconds).
The effects are timed to this through the percentage values.
At 15%, the ad will have faded in fully in 0.75s (15% x 5s), remains for 3s ((75-15)% x 5s), and goes nuts to the end of the 5s.
So in the last 1.25s, the shapes fade out, move right off the page, shrink to quarter size and have a full clockwise circle rotate.

Any page refresh or variant change restarts it all over.

Acorn