Page 1 of 1

2 image & 2 lines text alternately animated in layout grid-window

Posted: Mon Mar 08, 2021 2:46 pm
by mccs
WYSIWYG V. 15.4 - Win 7 Ultimate
My Problem:

Layout grid with 1 Column 12x
Inserted 1 image # 1 und 2 lines of text (only below possible)

Everything centered horizontally with a maximum display width of 970 px

I want to add a picture # 2 in the same place (same pixels). So 2 pictures on top of each other, which are every 3 sec. faded alternately.

Animate fade-in with Duration = 3000 and delay = 0 should display image 1
Animate fade-in with duration = 3000 and delay = 3000 should display image 2

Iteration = -1 (= ongoing)
Timing: Linear
Fill mode: both
Play state: running


Problem a): how can I insert picture no. 2 over picture no. 1 in the same place with the same size?
Problem b): how do I get the 2 lines of text animated over picture no. 1 and picture no. 2 - also animated but only once (fade-in)?

If more information is needed - I'll deliver. I'm still a beginner :? and I'm struggling bit by bit.
Thanks in advance.

Re: 2 image & 2 lines text alternately animated in layout grid-window

Posted: Mon Mar 08, 2021 3:12 pm
by crispy68
Getting the images to line up in a layout grid will be tough because the images float beneath each other in the grid. The 2nd image wont replace the position of the first until it is completely faded out which will probably cause a jump in the images. Your best bet would be to use a Floating Layer as it will allow you to stack images on each other. Another possible option would be to use the photo gallery set to 1 image. It might be the slideshow/carousel option with a fade? Sorry, not at my computer to double check.

Re: 2 image & 2 lines text alternately animated in layout grid-window

Posted: Tue Mar 09, 2021 3:05 pm
by mccs
I found another way to alternately cross-fade at least 2 images:
Slideshow with 2 pictures and the following settings (both images are exactly the same size!):

General/Options:

Type: sequence
Pause time: 3000
Animation: fade
Full wide: false (my page should be 960px wide). therefore:
Maximum width: 960
Animation duration: 3000

Works fine so far. Text is now just below the pictures.

Thanks for the help. Even if it didn't help: you always learn something.
Perhaps there will be a solution for the text-problem in the future.

Greetings