Hi miteinander
Ich suche eine JS Vorlage um folgendes zu realisieren, dass ich mit den CSS Transformation und Transition Möglichkeiten nicht gebacken bekomme.
Der Z-Index eines divs soll sich nach 2 sekunden von 100 auf - 100 setzen.
Mit CSS und opacity kann ich es zwar ausblenden, aber dann liegt da immer noch ein Layer, zwar transparent, über den anderen Sachen. Denke daher, dass kein Weg an JS vorbeiführt, zumal ich so gleich zwei Fliegen mit einer Klatsche erledigen kann, da der Div bei deaktiviertem JS ja nicht verschwindet, kann ich dort per CSS nen Text nach 3 Sekunden einblenden, der dazu auffordert, das JS aktiviert wird.
Hat mir jemand dazu eine Vorlage?
Und wie kann ich von der Priorität her definieren, dass das als wirklich aller aller erstes geladen wird?
EDIT: Da es nun funktioniert, hier rasch als Vorlage, falls jemand anderes mal das selbe Problem haben sollte:
Der Teil, der in die HTML, PHP, ... Datei kommt.
Falls wer Interesse hat, dass CSS noch.
Vielen Dank dann noch an die User Teisi, Ozzy83 und Lawnmower, welche mir halfen, den (die) Fehler zu finden.
Ich suche eine JS Vorlage um folgendes zu realisieren, dass ich mit den CSS Transformation und Transition Möglichkeiten nicht gebacken bekomme.
Der Z-Index eines divs soll sich nach 2 sekunden von 100 auf - 100 setzen.
Mit CSS und opacity kann ich es zwar ausblenden, aber dann liegt da immer noch ein Layer, zwar transparent, über den anderen Sachen. Denke daher, dass kein Weg an JS vorbeiführt, zumal ich so gleich zwei Fliegen mit einer Klatsche erledigen kann, da der Div bei deaktiviertem JS ja nicht verschwindet, kann ich dort per CSS nen Text nach 3 Sekunden einblenden, der dazu auffordert, das JS aktiviert wird.
Hat mir jemand dazu eine Vorlage?
Und wie kann ich von der Priorität her definieren, dass das als wirklich aller aller erstes geladen wird?
EDIT: Da es nun funktioniert, hier rasch als Vorlage, falls jemand anderes mal das selbe Problem haben sollte:
Der Teil, der in die HTML, PHP, ... Datei kommt.
HTML:
<head>
.....
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> //oder src auf den lokalen Ort, wenn ihr dort die liegen habt.
</head>
<body>
.....
<div id="Ladeanimation">
<img id="Ladeanimation-1" src="[I]Deine Quelle zum Logo[/I]" alt="Webseitenlogo">
<input type="radio" name="color" id="box" checked /><label for="box"></label>
<ul class="Ladepunkte">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</u>
<p id="Ladeanimation-2">
Diese Webseite nutzt JavaScript. Bitte aktiviere JavaScript in deinem Browser, um zur Webseite zu gelangen.
</p>
</div>
<script> // [B]wichtig[/B], muss nach dem ID vergebenden Element kommen.
(function($) {
setTimeout(function() {
$("#Ladeanimation").fadeOut(500); //Zahl gibt Effekt Dauer an.
}, 8500); // Zahl gibt Zeitpunkt an, wenn der Effekt eintreten soll an.
})(jQuery);
</script>
.....
</body>Falls wer Interesse hat, dass CSS noch.
CSS:
#Ladeanimation{
width: 100vw;
height: 100vh;
z-index: 200;
position: fixed;
background-color: #000000;
opacity:1;
}
#Ladeanimation-1{
position: fixed;
margin-top: 10%;
margin-left: 40vw;
height: 20vw;
width: 20vw;
border-radius: 10vw;
}
.Ladepunkte {
list-style: none;
height: 5vh;
width: 20vw;
position: fixed;
margin-left: 43.5vw;
margin-top: 35%;
}
.Ladepunkte li {
position: absolute;
height: 1vw;
width: 1vw;
background-color: black;
border-radius: 5px;
margin-left: -3000px;
animation-name: loading;
animation-duration: 6.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-direction: normal;
}
.Ladepunkte li:nth-child(1) {
left: 0vw;
animation-delay: 0.4s;
}
.Ladepunkte li:nth-child(2) {
left: 3vw;
animation-delay: 0.8s;
}
.Ladepunkte li:nth-child(3) {
left: 6vw;
animation-delay: 1.2s;
}
.Ladepunkte li:nth-child(4) {
left: 9vw;
animation-delay: 1.6s;
}
.Ladepunkte li:nth-child(5) {
left: 12vw;
animation-delay: 2.0s;
}
@keyframes loading {
0% { margin-left: -3000px; }
30%,70% { margin-left: 0px; }
100% { margin-left: 3000px; }
}
#box:checked ~ .Ladepunkte li {
box-shadow: 0 0 5px rgba(173,255,47,1),
0 0 10px rgba(173,255,47,1),
0 0 15px rgba(173,255,47,1),
0 0 20px rgba(173,255,47,1),
0 0 30px rgba(173,255,47,1),
0 0 40px rgba(173,255,47,1);
}
label {
display: inline-block;
background-color: #000000;
padding: 0px 0px;
cursor: none;
}
input {
display: none;
}
input[type="radio"]:checked + label {
background-color: black;
}
#Ladeanimation-2{
color: white;
height: 100vh;
width: 100vw;
padding-top: 70vh;
vertical-align: middle;
text-align: center;
font-size: 1.5em;
hyphens: auto;
animation: jshinweis 10s;
}
@keyframes jshinweis {
0% { opacity: 0; }
90% { opacity: 0; }
95% { opacity: 0.5; }
100% { opacity: 1; }
}Vielen Dank dann noch an die User Teisi, Ozzy83 und Lawnmower, welche mir halfen, den (die) Fehler zu finden.
Zuletzt bearbeitet:
