UFO Slogan Slider, <div> eindeutig benennen adressieren, Was ist falsch?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Manuel Lemke

Mitglied
13 Februar 2021
61
0
6
@PlanetEarth
universalFavorService.com
Hi allerseits! Brauch Hilfe für ein SlideShowElement. Habe Slogan 1 und 2 mit jeweils weißer Schrift Arial... versehen.
Als nächstes sollt das so animiert sein, dass die Texte von unten kommend auf Monitor vor dem BesucherSichtBereich abbremsen, kurz warten soll für 1-3 Sekunden sichbar, danach beschleunigend nach oben aus dem SichtBereich verschwindet! https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
Das hat soweit geklappt für sich.

Wollt im nächsten Schritt vorhandene PäsentationsSeite zusammen mit animiertem Text kombinieren, darin ist ein Bild zentral den Monitor deckend. Ergebnis = das div mit dem Bild wird auch animiert. Konnt dann animierten div mit Texten umbenennen in #UFO bzw. UF010.
Jetzt bleibt Hintergrund am Ort, aber der Text spinnt seit dem rum
die Geschwindigkeit hat sich von allein verändert, dass Text keine 3 Sekunden mehr auf Bilschirm lesbar wartet,
sondern in Rekord Geschwindigkeit ohne zu bremsen weiterfährt.

Frage_
Wo mit kann man den animierten Text eindeutig zuordenbar als divElement korrekt benennen, das es zusammen funktioniert?
Der Hintergrund wurde so benannt

<style>
.Hintergrund {...}
</style>

der LaufText so

<style>
#UFO {...}
@keyframes UFO {...}

#UF010 {...}
@keyframes UF010 {...}
</style>

Sieht folgendes Maßen aus in Html (ohne Hintergrund, vereinfacht) _

<html>

<head>
</head>

<BODY Style="
position:relative; z-index: 1;
top:0px; left:0px; right:0px; bottom:0px;
width:100%; height:100%;
margin:0px;padding:0px;
overflow:hidden; border:none; outline: none;
background-color:transparent;
">

<style>
#UFO { position: relative;
z-index: 3;animation-name:UFO;
animation-duration: 3s;
animation-iteration-count: 100;
}


@keyframes UFO {
from {top: 0px;}
33% {top: 333px;}
44% {top: 444px;}
51% {top: 77px;}
64% {top: 51px;}
77% {top: 0px;}
to {top: -1024px;}
}

#UF010 { position: relative;
z-index: 3;animation-name:UF010;
animation-duration: 4s;
animation-iteration-count: 100;
}


@keyframes UF010 {
from {top: 1024px;}
51% {top: 77px;}
77% {top: 0px;}
to {top: -1024px;}
}
</style>

<div>

<div name="UFO" id="UFO" style='text-align:center;font-family: "Raleway", sans-serif; color:#fff; font-size: 3vw;text-shadow: 0.01em 0.01em #999;'>Hello Duda!
</div>

</br>

<div name="UF010" id="UF010" style='text-align:center;font-family: "Raleway", sans-serif; color:#fff; font-size: 5vw;text-shadow: 0.01em 0.01em #999;'>Love is the Solution.
</div>


</div>

</BODY>

</html>



Vielen Dank. Animation.png
 

basti1012

Senior HTML'ler
26 November 2017
1.612
173
63
Minden
basti1012.de
Könntest du mal ein laufendes Beispiel bei codepen.io erstellen?
Dann dein ganze Inline Style ist auch unnötig , falsch und nicht Programmierer freundlich.
Ein DIV hat kein NAME Attribute.
 

Manuel Lemke

Mitglied
13 Februar 2021
61
0
6
@PlanetEarth
universalFavorService.com
Könntest du mal ein laufendes Beispiel bei codepen.io erstellen?
Dann dein ganze Inline Style ist auch unnötig , falsch und nicht Programmierer freundlich.
Ein DIV hat kein NAME Attribute.
InlineStyle MUSS sein, blätter da bei bearbeiten nicht zwischen mehreren Dokumenten hin und her, oder such an anderer Stelle im Html. AnzeigeDauer der Folien variiert, TextGröße wird individuell angepasst... jeweils, Ist also am besten es bleibt alles zusammen in 1.
 
Zuletzt bearbeitet:

Manuel Lemke

Mitglied
13 Februar 2021
61
0
6
@PlanetEarth
universalFavorService.com
Habe das inzwischen so gelöst_


<html>

<head>
</head>

<BODY Style="
position:relative; z-index: 1;
top:0px; left:0px; right:0px; bottom:0px;
width:100%; height:100%;
margin:0px;padding:0px;
overflow:hidden; border:none; outline: none;
background-color:transparent;
">


<div style="position:absolute; z-index:2; background: rgba(transparent);
min-width:80%;min-height:90%;border-width:0px; left:123px; right: 12px; bottom:-8px;
overflow: hidden;
border-radius: 24px 24px 0px 0px;">

<style>
#UFO { position: relative;
animation-name:UFO;
animation-duration: 3s;
animation-iteration-count: 1;
}

@keyframes UFO {
from {top: 0px;}
33% {top: 333px;}
44% {top: 444px;}
51% {top: 77px;}
64% {top: 51px;}
77% {top: 0px;}
to {top: -1024px;}
}

#UF010 { position: relative;
animation-name:UF010;
animation-duration: 4s;
animation-iteration-count: 1;
}

@keyframes UF010 {
from {top: 1024px;}
51% {top: 77px;}
77% {top: 0px;}
to {top: -1024px;}
}

#UF101 { position: relative;
animation-name:UF101;
animation-duration: 9s;
animation-iteration-count: 1;
}

@keyframes UF101 {
0% {transform: scale(0.78, 0.78);bottom: 51%;opacity: 1;}
97% {transform: scale(1.0, 1.0); bottom: 64%; opacity: 1;}
100% {transform: scale(10.1, 10.1); bottom: 66%;opacity: 0.1;}
}
</style>

<div name="UFO" id="UFO" style='text-align:center;font-family: "Raleway", sans-serif; color:#fff; font-size: 5vw;text-shadow: 0.01em 0.01em #999;'>Text 1
</div>
</br>

<div name="UF010" id="UF010" style='text-align:center;font-family: "Raleway", sans-serif; color:#fff; font-size: 3vw;text-shadow: 0.01em 0.01em #999;'>Text 2
</div>
</br>

<div name="UF101" id="UF101" style='text-align:center;font-family: "Raleway", sans-serif; color:#fff; font-size: 3vw;text-shadow: 0.01em 0.01em #999;'>Text 3
</div>
</br>

</div>



</a>
</BODY>
</html>
 

jonas3344

Aktives Mitglied
25 Oktober 2019
139
43
28
38
Ein div hat immer noch kein name-Attribut.

<style> gehört in den <head> oder noch besser in eine externe css-Datei.