Opgelost Effect bewerkstellingen

[Erick]

Op de afbeelding een globale tekening van wat ik in mijn hoofd heb. Het groene kader (= afbeelding) komt vanuit links in met een fade-effect. Tegelijkertijd komt het rode kader (= eveneens afbeelding) vanuit het midden/rechts. Na enkele seconden gaan ze op dezelfde manier ook weer uit beeld. Vervolgens komen er weer twee kaders met nieuwe afbeeldingen. En daarna nog een keer. Na die cyclus moet er weer met de eerste twee afbeeldingen gestart worden.

Kunnen jullie mij adviseren op welke manier ik dat het beste kan realisren: d.m.v. een animatie of een slider. Ik heb al eens rondgekeken, o.a. op Codepen, maar nog niet iets gezien waarvan ik dacht, hier kan ik van maken wat ik beoogd heb. Waar kan ik het best naar zoeken?

 

[artstudiog]

Powerpoint?

 

[Erick]

Nee, het is voor een website, dus probeer het te maken met css en eventueel js.

 

[Erick]

Ik heb de opzet d.m.v. een animatie wel voor elkaar gekregen. De animatie bestaat uit een cyclus van 3, maar bij de tweede en de derde, blijf je de achtergrondafbeeldingen van de voorgaande items zien.

Op welke manier kan ik de animatie aanpassen zodat telkens alleen de afbeelding van het item dat aan de beurt is, wordt weergegeven?

 

[gouwepeer]

Op welke manier kan ik de animatie aanpassen zodat telkens alleen de afbeelding van het item dat aan de beurt is, wordt weergegeven?

Zo te zien wordt er bij elke afbeelding een bijbehorende achtergrondafbeelding geladen. Klopt het dat het inmiddels is opgelost?

 

[Erick]

@gouwepeer Ik heb inderdaad een oplossing gevonden. Alleen vraag ik me af of het de mooiste is. Ik heb het volgende gedaan:

Elke afbeelding komt zo'n 10 seconden in beeld, maar de animatie voor elke afbeelding heeft de lengte van de drie afbeeldingen samen, dus 30 seconden. De eerste afbeelding is alleen zichtbaar in de eerste 33% van de afbeelding, de tweede van 33% tot 66,7% en de laatste dan tot 100%.

In keyframes ziet dat er zo uit:
@keyframes bg-transition-1 {
from {z-index: -100; opacity: 0; left: -75px; }
3.33% {z-index: 10; opacity: 0.01; }
10% {z-index: 10; opacity: 1; left: 5%;}
20.33% {z-index: 10; opacity: 1; left: 5%;}
30% {z-index: 10; opacity: 0.01;}
33.33% {z-index: -100; opacity: 0; left: -75px;}
to {z-index: -100; opacity: 0; left: -75px;}
}

@keyframes bg-transition-2 {
from {z-index: -100; opacity: 0; left: -75px; }
33.33% {z-index: -100; opacity: 0; left: -75px; }
36.67% {z-index: 10; opacity: 0.01; }
43.33% {z-index: 10; opacity: 1; left: 5%;}
57.67% {z-index: 10; opacity: 1; left: 5%;}
63.33% {z-index: 10; opacity: 0.01;}
66.67% {z-index: -100; opacity: 0; left: -75px;}
to {z-index: -100; opacity: 0; left: -75px;}
}

@keyframes bg-transition-3 {
from {z-index: -100; opacity: 0; left: -75px; }
66.67% {z-index: -100; opacity: 0; left: -75px; }
70% {z-index: 10; opacity: 0.01; }
76.67% {z-index: 10; opacity: 1; left: 5%;}
90% {z-index: 10; opacity: 1; left: 5%;}
96.67% {z-index: 10; opacity: 0.01;}
to {z-index: -100; opacity: 0; left: -75px;}
}

Het werkt nu zoals ik het voor ogen had, maar is het niet een complexe manier om het doel te bereiken?