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

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

M

Manuel Lemke

Mitglied
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
 
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.
 
basti1012 schrieb:
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.
Zum Vergrößern anklicken....
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:
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>
 
Ein div hat immer noch kein name-Attribut.

<style> gehört in den <head> oder noch besser in eine externe css-Datei.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben