AOS Animation auf CSS Background Image anwenden

[Khan]

Hi Leute,

kennt sich jemand mit AOS aus?

Ich möchte das ein Background Image, welches in der CSS angegeben wurde, per AOS Animation hereingezoomt wird. Die AOS JS Datei ist schon fertig, funktioniert! Ich habe das getestet mit einem HTML Code, der Funktioniert auch, das Image davon wird hereingezoomt:

<div class="col-md-4 agileits-w3layouts-grid img" data-aos="zoom-in">
<img src="images/why.jpg" alt=" " class="img-responsive" />
</div>

Der CSS Code des Background Images:

.banner {
  background-image: url(../images/logo.png), url(../images/publikum.jpg);
  min-height: 750px;
	background-size: contain, cover;
	background-position: center, center;
	background-color: #282828;
	background-repeat: no-repeat, no-repeat;
}

Die AOS Animation soll nur auf das erste Image, also logo.png.

Wie ist es möglich in diesem CSS Befehl das AOS zu integrieren?

Ich hoffe ich konnte mich verständlich ausdrücken.

MfG KC

[Gunnar Bittersmann]

@@Khan

kennt sich jemand mit AOS aus?

Das nicht. Aber etwas mit UX und WCAG.

Solche Scrolleffekte schaden wohl eher als dass sie irgendwem nutzen. Was soll der Schnickschnack?

LLAP 🖖

[Matthias Apsel]

Hallo Khan,

Ich möchte das ein Background Image, welches in der CSS angegeben wurde, per AOS Animation hereingezoomt wird. Die AOS JS Datei ist schon fertig, funktioniert!

JavaScript sollte nicht notwendig sein.

Wann soll gezoomt werden? Immer wieder? Nur einmal? Nach einer Benutzeraktion?

.banner {
  background-image: url(../images/logo.png), url(../images/publikum.jpg);
  min-height: 750px;
	background-size: contain, cover;
	background-position: center, center;
	background-color: #282828;
	background-repeat: no-repeat, no-repeat;
}

Die AOS Animation soll nur auf das erste Image, also logo.png.

Wie ist es möglich in diesem CSS Befehl das AOS zu integrieren?

Ich hoffe ich konnte mich verständlich ausdrücken.

Bei multiplen Hintergründen ist das mMn. unmöglich, ich würde die Hintergrundbilder auf verschiedene (Pseudo-)Elemente aufteilen.

Bis demnächst
Matthias