Forum - RE: Css Animation - 2

Zitat von Daishi im Beitrag #4

---

Hallo Nara ich habe es mal angepasst, hoffe, es ist so ok.

Habe es aber im Forum nicht getestet, habe es nur im CodePen bearbeitet. Ich hoffe das es so in Ordnung ist.

Hier mal der neue Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
 

<div class="oberleiste0">
<div class="Wald">
<div class="Leiste">
</div>
<div class="niko"><img src="//files.homepagemodules.de/b855319/a_191_28d44d5d.gif"></div>
</div></div>
<div id="kopfteil">
<h6>Wir wünschen allen Mitgliedern und Gästen ein schönes Weihnachtsfest.
</h6></div>
</div>
<style>
h6
{
font-size: 25px !important;
text-transform: uppercase;
font-family: VERDANA,ARIAL,HELVETICA;
background: url(https://abload.de/img/glitzergoldipft7.jpg);
color: #fff;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
padding: 0;
-webkit-text-stroke: 1px #403d37;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgb(64, 61, 55);
padding: 5px;
}
 

.Oberlauf
{border:1px solid green;
margin-left:4%;
margin-right:4%;
margin-top: 7px !important;
margin-bottom: 31px;
border: 2px ridge #f5e091;
margin-left: 0%;
margin-right: 14%;
margin-top: -12px;
margin-bottom: 26px !important;
max-width: 1418px;
width: 100%;
text-align: center;
border-radius:10px;
}
#kopfteil {
box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset,0 0 5px rgba(0, 0, 0, 0.5);
background: linear-gradient(#e5eaf3 , #acb9cf);
padding: 1px;
height: auto;
text-align:center;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
 
}
 
.niko {
  width: 25px;
  height: 215px;
  bottom: 50%;
  position: fixed;
  animation: gehen 25s linear infinite;
}
 
@keyframes gehen {
  0%, 100% { 
    left: 0;    
    transform: translatex(-50%) scalex(1); 
  }
   49% { 
    left: 100%; 
    transform: translatex(-50%) scalex(1); 
  }
    50% { 
     left: 100%; 
     transform: translatex(-50%) scalex(-1);  
  }
     99% { 
      left: 0;   
      transform: translatex(-50%) scalex(-1);      }
}
 
 
.Wald {
background: url(https://i.postimg.cc/Pr0PdsK4/waldani.png)bottom center;
padding: 0;
height: 135px;
animation: ziehen 370s infinite linear;
 
}
 
.oberleiste0{
background: linear-gradient(180deg, rgb(209, 219, 228) 0%, rgb(174, 192, 204) 31%, rgb(255, 255, 255) 99%)!important;
background-image:url(https://i.postimg.cc/7YNdFGkd/himmel.jpg);
padding: 0;
margin-left:4%;
margin-right:4%;
height: 130px;
width:100%;
border-bottom: 0 solid #333;
margin: auto auto;
vertical-align: middle;
border-radius:8px;
box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset,0 0 5px rgba(0, 0, 0, 0.5);
}
.oberleiste0 {
animation: ziehen 750s infinite linear;
}
@keyframes ziehen {
from {background-position: 0 0;}
to {background-position: -9999px 0;}
}
 
</style>
 
 

Schließen

Ich hoffe, ich konnte dir hiermit ein bisschen helfen.

In CodePen sieht es so aus:

Dein Nikolaus!



Ich hoffe, es geht bei dir.

Liebe Grüße

Daishi

---

Was ich vergessen habe: Die animierte GIF war trotz "Position: fixed" nicht fixiert. Ich habe es dann so gemacht:

.niko {
  width: 155px;
  height: 10px;
  bottom: 40%;
  position: absolute;
  animation: gehen 25s linear infinite;
}
 

Sorry möchte mich entschuldigen, dass ich mich so spät melde, war heute Nacht mit dem Handy kurz online bei der Nachtschicht, bei Kaffee und Raucherpause.

Wird noch etwas dauern mit den Script, hoffe, du bist nicht böse. Habe im Nebenjob im Moment viel Arbeit. Da es kein Schnee gibt, habe ich viele Aufträge für Kehrdienst und Blätter wegfegen.

Ich hoffe, dass ihr mir das nicht übel nimmt. Sobald ich wieder mehr Zeit habe, mache ich am Script weiter. Ich entschuldige mich sehr dafür, dass ich dafür im Moment keine Zeit habe, aber wenn ich Zeit habe und es funktioniert, werde ich es hier hineinschreiben.

Ich wünsche euch noch ein schönes Wochenende und einen schönen 3 Advent.


Nette Grüße

Daishi

Nicht schlimm Daishi. Ich kann den Nikolaus ja auch so nehmen, dass er nur immer wieder hinläuft. Muss nicht zwangsläufig drehen, war eigentlich nur mal so ein Gedanke. Mach dir keinen Stress. Kipper Spedition, du hast es über die ganze Breite genommen, das geht. Ich würde aber an deiner Stelle die abgerundeten Ecken rausnehmen, hatte das extra für mein Forum angepasst, denke bei dir sähe es ohne besser aus oder? Weil es über die ganze Breite geht.

Hallo ihr Lieben.

Habe etwas am Script weitergearbeitet, habe jetzt nur die Berechnungen fertig von X = Start bis Y= Ende, bis wohin er läuft.

Ich musste diese so berechnen, vorher war es über die ganze Breite also 1418 Pixel, musste ich durch 2 teilen, dann komme ich auf 709 Pixel. Musste dann alles umrechnen, auch die Positionen Start und Ziel.

Das Script ist noch nicht fertig, möchte es nur zeigen, wie weit ich jetzt gekommen bin. Start und Ziel funktioniert jetzt, nur muss ich die genaue Drehung berechnen, das wird noch ein wenig dauern.

Den Rest drumherum muss ich auch noch anpassen. Hauptsächlich habe ich mich erst um die Start- und Ziel-Positionen gekümmert.

So sieht es jetzt im Moment aus:

<div class="Oberlauf">
<div class="oberleiste0">
<div class="Wald">
<div class="Leiste">
</div>
<div class="niko"></div>
</div></div>
<div id="kopfteil">
<h6>Wir wünschen allen Mitgliedern und Gästen ein schönes Weihnachtsfest.
</h6></div>
</div>
<style>
 h6
{
  font-size: 25px !important;
  text-transform: uppercase;
  font-family: VERDANA,ARIAL,HELVETICA;
background: url(https://abload.de/img/glitzergoldipft7.jpg);
color: #fff;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  padding: 0;
 -webkit-text-stroke: 1px #403d37;
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: rgb(64, 61, 55);
  padding: 5px;
  } 
  
  
.Oberlauf
{border:1px solid green;
        margin-left:4%;
margin-right:4%;
margin-top: 7px !important;
margin-bottom: 31px;
    border: 2px ridge #f5e091;
  margin-left: 0%;
  margin-right: 14%;
  margin-top: -12px;
  margin-bottom: 26px !important;
  max-width: 1418px;
  width: 100%;
  text-align: center; 
    border-radius:10px;
}
#kopfteil {  
box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset,0 0 5px rgba(0, 0, 0, 0.5);
background: linear-gradient(#e5eaf3 , #acb9cf);
padding: 1px;
height: auto;
text-align:center;
 border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;   
 
}
.niko {
background: url(//files.homepagemodules.de/b855319/a_191_28d44d5d.gif) no-repeat right;
background-size: 72px;
padding-top: 0px;
height: 156px;
right: 60;
    text-align: right;
    animation:geht 45s linear infinite alternate ;
  }
 
@keyframes geht {
   
   30% { 
     left: 100%; 
     transform: translatex(-2%) scalex(-1);  
  }
     100 { 
      left: 100%;   
      transform: translatex(-5%) scalex(-1);      }
}
 
    
.Wald {
background: url(https://i.postimg.cc/Pr0PdsK4/waldani.png)bottom center;
padding: 0;
height: 135px;
animation: ziehen 155s infinite linear;
 
}
 
.oberleiste0{
 background: linear-gradient(180deg, rgb(209, 219, 228) 0%, rgb(174, 192, 204) 31%, rgb(255, 255, 255) 99%)!important;   
background-image:url(https://i.postimg.cc/7YNdFGkd/himmel.jpg);
padding: 0;
margin-left:4%;
margin-right:4%;
height: 130px;
width:55%;
border-bottom: 0 solid #333;
margin: auto auto;
vertical-align: middle;
  border-radius:8px;   
box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset,0 0 5px rgba(0, 0, 0, 0.5);
}
.oberleiste0 {
animation: ziehen 750s infinite linear;
}
@keyframes ziehen {
from {background-position: 2 2;}
to {background-position: -9999px 2;}
 }
 
 

Habe es hinbekommen, dank Wolfgang.

Er hat mir ein Tipp gegeben, mit " Margin " für die X - Y Achsen. Warum ich es immer so schwer mache, wenn es einfach geht. Dafür danke ich dir sehr, @Wolfgang.

Ich habe jetzt nochmal alles bearbeitet, hoffe das es so in Ordnung ist. Ein kleines Problem gibt es noch, ein Video füge ich unten ein. Für das Forum muss man Anpassungen machen, und mit den Zahlen spielen, da es im Forum anders angezeigt wird als bei mir im CodePen.

@Arndt hat es auch schon bemerkt, er musste das Bild noch anpassen.

Zitat von Kipper-Spedition im Beitrag #11

---

Funktioniert hervorragend! Die GIF-Datei habe ich noch ein wenig in der Höhe korrigieren müssen, aber sonst .

---

<div class="oberleiste0">
<div class="Wald">
<div class="Leiste">
</div>
<div class="x_y"><div class="nikolaus_test"><img src="//files.homepagemodules.de/b104774/a_665_281ac3a7.gif"></div>
</div></div>
<div id="kopfteil">
<h6>Wir wünschen allen Mitgliedern und Gästen ein besinnliches Fest.
</h6></div>
</div>
<style>
h6
{
font-size: 18px !important;
text-transform: uppercase;
font-family: VERDANA,ARIAL,HELVETICA;
background: url(https://abload.de/img/glitzergoldipft7.jpg);
color: #fff;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
padding: 0;
-webkit-text-stroke: 1px #403d37;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgb(64, 61, 55);
padding: 1px;
}
 
 
.Oberlauf
{border:1px solid green;
margin-left:4%;
margin-right:4%;
margin-top: 7px !important;
margin-bottom: 31px;
border: 2px ridge #f5e091;
margin-left: 0%;
margin-right: 14%;
margin-top: -12px;
margin-bottom: 26px !important;
max-width: 718px;
width: 25%;
text-align: center;
border-radius:10px;
}
#kopfteil {
box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset,0 0 5px rgba(0, 0, 0, 0.5);
background: linear-gradient(#e5eaf3 , #acb9cf);
padding: 1px;
height: auto;
text-align:center;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
 
}
 
 
  
.nikolaus_test {
  top: 15px;
  position: absolute;
  width: 25px;
  height: 215px;
  animation: laufen 18s linear infinite;
}
.x_y {
  position:relative;
  margin-left:5%; 
  margin-right:7%;
}
 
@keyframes laufen {
  0%, 100% { 
    left: 0;    
    transform: translatex(-50%) scalex(1); 
  }
   49% { 
    left: 100%; 
    transform: translatex(-50%) scalex(1); 
  }
    50% { 
     left: 100%; 
     transform: translatex(-50%) scalex(-1);  
  }
     99% { 
      left: 0;   
      transform: translatex(-50%) scalex(-1);      }
} 
    
 
 
.Wald {
background: url(https://i.postimg.cc/Pr0PdsK4/waldani.png)bottom center;
padding: 0;
height: 135px;
animation: ziehen 370s infinite linear;
 
}
 
.oberleiste0{
background: linear-gradient(180deg, rgb(209, 219, 228) 0%, rgb(174, 192, 204) 31%, rgb(255, 255, 255) 99%)!important;
background-image:url(https://i.postimg.cc/7YNdFGkd/himmel.jpg);
padding: 0;
margin-left:4%;
margin-right:4%;
height: 130px;
width:25%;
border-bottom: 0 solid #333;
margin: auto auto;
vertical-align: middle;
border-radius:8px;
box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset,0 0 5px rgba(0, 0, 0, 0.5);
}
.oberleiste0 {
animation: ziehen 750s infinite linear;
}
@keyframes ziehen {
from {background-position: 0 0;}
to {background-position: -9999px 0;}
}
 
</style>
 
 
 

So, habe es mir nun angepasst, ging ja dank dem Margin wirklich gut. Einzig im mobilen Template läuft es nicht so gut. Vor allem reagiert bei mir der Avatar links oben mit. Ist aber nicht weiter schlimm, ich aktiviere mobil einfach das andere script.
Vielen Dank Daishi für deine Mühe!!!!!

Habe es bei mir im Portal installiert, sieht gut aus, musste nur noch Anpassungen mit der Drehung machen.

Anpassungen in Zeile 44 und 45:

.Nikolauf {
  position:relative;
  margin-left:30%; 
  margin-right:30%;
}
 

in Zeile 44 und 45 musste ich umstellen auf 2 %

Und auf dem Handy sieht es auch top aus, passt sich bei mir automatisch an.

der Oberlauf Div Container ist bei mir hier

ein extra Rahmen in goldfarben.....