Website Animation im Hintergrund?
Guten Tag,
Ich arbeite wieder an einer neuen Website.
Momentan ist die Animation mit dem orangen Licht etwas langweilig.. finde ich.
Ich habe es auch schon so wie hier gemacht.
Mir gefällt der Style, dass dort so Licht hinter dem Muster ist.
Weiss aber nicht, was ich noch alles mit dem Licht machen könnte? Hat da jemand eine Idee? Oder vielleicht was komplett anderes?
Bis jetzt ist da alles mit HTML und CSS gemacht, sollte eigentlich auch so bleiben.
4 Antworten
Mehr Dezenz wäre besser. Der Hintergrund heißt nicht umsonst so, wie er heißt. Selbst bei den folgenden Vorschlägen / Beispielen sollte daher darauf geachtet werden, dass der Effekt nicht zu stark wirkt. Oft wäre daher eine Anpassung diesbezüglich noch zu empfehlen.
Vorschläge:
- Die Hintergrundfarbe innerhalb eines kleinen Farbraums (z.B. zwischen blau und dunkelblau) durch eine Animation wechseln lassen (wie hier)
- Einen tieffarbigen, ruhigen Disco-Blur-Effekt einbauen (wie hier oder hier)
- Den Hintergrund mit verschiedenfarbigen Formen füllen (wie hier oder hier)
- langsame, kurze und wenige Sternschnuppen (wie hier)
- Leichte Wellenbewegungen im Footer-Bereich (wie hier) oder sich bewegende Wolken (wie hier)
Das der Effekt auch zum gebotenen Thema der Seite passen muss, sollte ja klar sein.
Einfaches y-Verschieben ist wirklich ein wenig langweilig... Ich hätte den kompletten Background mit einen Raster aus diesen "lichterchen" erstellt, und diese dann random langsam aufglimmen und abglimmen lassen, das gibt bestimmt einen angenehmen effekt. Also aufleuchtungsdauer 5 Sec oder länger und das Random auf dem kompletten Hintergrund...
Was mir sehr gut gefällt ist das "Repeaten" das Background-bildes... also die CSS-Freie aber sehr gute Bild-Lösung
Daran habe ich auch schon gedacht... werde mal gucken, wie das dann aussieht ;)
Du könntest die Lichter nicht einfach nur vertikal, sondern ein wenig mehr random wandern lassen, vielleicht könnten sie sich auch in Gruppen aufspalten und später wieder zusammenmergen. Wie du das technisch umsetzt, musst du aber selbst wissen.
Ähnlich. Ich würde es aber trotzdem etwas randomisierter und ausgefallener gestalten.
Wenn du dir den Quellcode der anderen Seite anschaust, siehst du, wie die das machen.
<html>
<head>
<style>
.licht {
top: 50%;
left: 50%;
width: 5px;
height: 5px;
position: absolute;
background-color: rgb(20,65,180);
box-shadow: 0px 0px 80px 80px rgb(20,65,180);
animation: licht 30s infinite;
animation-direction: normal;
}
@keyframes licht{
1% {
top: 50%;
left: 50%;
}
2% {
top: 53%;
left: 47%;
}
3% {
top: 50%;
left: 44%;
}
4% {
top: 47%;
left: 41%;
}
5% {
top: 44%;
left: 44%;
}
6% {
top: 41%;
left: 47%;
}
7% {
top: 38%;
left: 50%;
}
8% {
top: 35%;
left: 53%;
}
9% {
top: 32%;
left: 56%;
}
10% {
top: 29%;
left: 59%;
}
11% {
top: 26%;
left: 62%;
}
12% {
top: 23%;
left: 65%;
}
13% {
top: 20%;
left: 68%;
}
14% {
top: 27%;
left: 71%;
}
15% {
top: 30%;
left: 74%;
}
16% {
top: 33%;
left: 71%;
}
17% {
top: 36%;
left: 68%;
}
18% {
top: 39%;
left: 65%;
}
19% {
top: 39%;
left: 62%;
}
20% {
top: 42%;
left: 59%;
}
21% {
top: 45%;
left: 56%;
}
22% {
top: 48%;
left: 56%;
}
23% {
top: 51%;
left: 56%;
}
24% {
top: 54%;
left: 56%;
}
25% {
top: 57%;
left: 59%;
}
26% {
top: 60%;
left: 62%;
}
27% {
top: 63%;
left: 65%;
}
28% {
top: 66%;
left: 62%;
}
29% {
top: 69%;
left: 59%;
}
30% {
top: 72%;
left: 56%;
}
31% {
top: 75%;
left: 53%;
}
32% {
top: 78%;
left: 50%;
}
33% {
top: 81%;
left: 53%;
}
34% {
top: 84%;
left: 53%;
}
35% {
top: 87%;
left: 53%;
}
36% {
top: 90%;
left: 50%;
}
37% {
top: 90%;
left: 47%;
}
38% {
top: 93%;
left: 50%;
}
39% {
top: 96%;
left: 47%;
}
40% {
top: 99%;
left: 47%;
}
41% {
top: 96%;
left: 44%;
}
42% {
top: 93%;
left: 41%;
}
43% {
top: 90%;
left: 44%;
}
44% {
top: 90%;
left: 44%;
}
45% {
top: 90%;
left: 47%;
}
46% {
top: 87%;
left: 50%;
}
47% {
top: 84%;
left: 47%;
}
48% {
top: 81%;
left: 44%;
}
49% {
top: 78%;
left: 41%;
}
50% {
top: 75%;
left: 43%;
}
51% {
top: 72%;
left: 40%;
}
52% {
top: 69%;
left: 37%;
}
53% {
top: 66%;
left: 34%;
}
54% {
top: 63%;
left: 31%;
}
55% {
top: 63%;
left: 28%;
}
56% {
top: 60%;
left: 25%;
}
57% {
top: 60%;
left: 22%;
}
58% {
top: 57%;
left: 19%;
}
59% {
top: 54%;
left: 22%;
}
60% {
top: 51%;
left: 25%;
}
61% {
top: 48%;
left: 22%;
}
62% {
top: 45%;
left: 19%;
}
63% {
top: 45%;
left: 22%;
}
64% {
top: 48%;
left: 25%;
}
65% {
top: 48%;
left: 28%;
}
66% {
top: 51%;
left: 31%;
}
67% {
top: 54%;
left: 34%;
}
68% {
}
69% {
top: 57%;
left: 40%;
}
70% {
top: 60%;
left: 43%;
}
71% {
top: 63%;
left: 46%;
}
72% {
top: 63%;
left: 46%;
}
73% {
top: 66%;
left: 46%;
}
74% {
top: 69%;
left: 49%;
}
75% {
top: 66%;
left: 52%;
}
76% {
top: 69%;
left: 55%;
}
77% {
top: 72%;
left: 58%;
}
78% {
top: 75%;
left: 61%;
}
79% {
top: 78%;
left: 64%;
}
80% {
top: 81%;
left: 67%;
}
81% {
top: 84%;
left: 70%;
}
82% {
top: 87%;
left: 73%;
}
83% {
top: 87%;
left: 70%;
}
84% {
top: 90%;
left: 67%;
}
85% {
top: 93%;
left: 64%;
}
86% {
top: 90%;
left: 61%;
}
87% {
top: 87%;
left: 61%;
}
88% {
top: 84%;
left: 58%;
}
89% {
top: 87%;
left: 55%;
}
90% {
top: 84%;
left: 52%;
}
91% {
top: 81%;
left: 49%;
}
92% {
top: 78%;
left: 46%;
}
93% {
top: 75%;
left: 43%;
}
94% {
top: 72%;
left: 40%;
}
95% {
top: 69%;
left: 40%;
}
96% {
top: 66%;
left: 43%;
}
97% {
top: 63%;
left: 46%;
}
98% {
top: 60%;
left: 49%;
}
99% {
top: 56%;
left: 51%;
}
100% {
top: 50%;
left: 50%;
}
}
</style>
</head>
<body>
<div class="licht" style="animation-direction:reverse;animation-delay:3s;"></div>
<div class="licht" style="animation-direction:normal;animation-delay:6s;"></div>
<div class="licht" style="animation-direction:reverse;animation-delay:9s;"></div>
<div class="licht" style="animation-direction:normal;animation-delay:12s;"></div>
<div class="licht" style="animation-direction:reverse;animation-delay:15s;"></div>
<div style="position:relative;border-radius:10px;background-image:url('resources/hintergrund-min.png');padding-bottom:5%;min-height:98vh;">
</div>
</body>
</html>
Das Backgroundimage musst dann noch selbst einstellen.
Evtl. musst du auch noch dafür sorgen, dass die Animation rechtzeitig anfängt.
Hatte das falsche eingefügt...Beitrag jetzt editiert mit richtigem Code^^
Das sind beides meine Seiten^^ und es geht mir ja nicht darum, das Design der anderen Seite nachzumachen.
Achso. Hm, du könntest natürlich die Lichter auch bunt machen, Heller und dunkler werden lassen, etc. Ich würde mir mal die animierbaren Attribute der Lichter anschauen und sehen, was man Alle machen kann.
Evtl. Interaktionen mit dem Mauszeiger oder mit anderen Userinteraktionen.
Hmm nehme nur ungerne eine andere Farbe, da das Logo orange ist und somit möchte ich der Seite einen orangen Akzent verleihen.
Wäre das nice, wenn die Lichter da aufleuchten, wo der Mauszeiger ist?
Mir fällt auf: Auf der zweiten Seite ist, zumindest bei mir, die Hoveranimation der Aufklappfelder etwas verbuggt.
Wenn ich bei einem aufgehovertem sehr nah an den unteren Rand gehe, dann wechselt das andauernd zwischen ausgefahren und dem Zusammenklappanimationszustand.
Das wahrscheinlich eher weniger, evtl. kann das schon cool sein, aber das wird möglicherweise nicht ganz leicht umzusetzen. Ich wüsste jetzt spontan nicht, wie ich in CSS die Mauszeigerposition beim Hovern über ein Div bekomme und diese dann verwenden kann, um Elemente zu bewegen.
Ließe sich möglicherweise dadurch verhindern, dass du das Ausklappmenü beim zusammenklappen nicht größer werden lässt, sondern die Größe dabei nur verringerst
Wäre dann etwa das gleiche wie bei der anderen Seite, die ich verlinkt habe.
Da treffen sich alle wieder in der Mitte...