nicht angemeldet
Hi Gregor!
Tausend Dank für den Tipp, auch wenn es vermutlich noch etwas dauern wird, bis ich verstanden
habe, wie das genau funktioniert! ;-)
Mein Code ist natürlich kein Geheimnis (Aber für jemand der Ahnung von der Materie hat,
wahrscheinlich eine Qual zu lesen!):
--HTML--
<!DOCTYPE HTML>
<html lang="de-formal">
<head>
<title>Index</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="expires" content="0">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, user-scalable=yes">
<meta name="author" content="Roadster">
<meta name="description" content="Index">
<link rel="shortcut icon" href="Grafiken/ICON.ico"
type="image/vnd.microsoft.icon">
<link rel="stylesheet" href="code/css/stylesbodysrt.css">
</head><body>
<script type="text/javascript">
function startstop1() {document.getElementById("startleft").style.animationPlayState = "paused";};
window.setTimeout("startstop1()", 3000);
function startstop2() {document.getElementById("startright").style.animationPlayState = "paused";};
window.setTimeout("startstop2()", 2000);
function startstop3() {document.getElementById("leftframe").style.animationPlayState = "paused";};
window.setTimeout("startstop3()", 4400);
function startstop4() {document.getElementById("centerframe").style.animationPlayState = "paused";};
window.setTimeout("startstop4()", 3400);
function startstop5() {document.getElementById("rightframe").style.animationPlayState = "paused";};
window.setTimeout("startstop5()", 3300);
</script>
<div ID="bodyframe">
<div ID="content">
<div ID="startframe">
<div ID="startleft" onload="startstop1()">
<h4><strong>Information</strong></h4>
<div ID="infofeld">
<h4><strong>Headline</strong></h4>
<p>Infotext</p>
</div>
</div>
<div ID="startright" onload="startstop2()">
<h4><strong>Suche placeholder</strong></h4>
<div ID="srsuche">
<form action="#">
<label>Suche</label>
<input name="Eingabe" type="text">
</form>
</div>
</div>
</div>
<div ID="main">
<div ID="mainleft">
<div ID="leftframe" onload="startstop3()">
<img ID="ofrbanpic" src="Grafiken/ofrbanpic.png">
<h4><strong>leftframe</strong></h4>
</div>
<div ID="leftfr1">
<img ID="allprivr" src="Grafiken/allprivr.png">
<h4><strong>leftfr1</strong></h4>
</div>
<div ID="centerframe" onload="startstop4()" onclick="centercl()">
<img ID="zvrbanpic" src="Grafiken/zvrbanpic.png">
<h4><strong>centerframe</strong></h4>
</div>
<div ID="centerfr1">
<img ID="sndprivr" src="Grafiken/sndprivr.png">
<h4><strong>centerfr1</strong></h4>
</div>
</div>
<div ID="mainright">
<div ID="rightframe" onload="startstop5()">
<img ID="strbanpic" src="Grafiken/strbanpic.png">
<h4><strong>rightframe</strong></h4>
</div>
<div ID="rightfr1">
<img ID="zivprzr" src="Grafiken/zivprzr.png">
<h4><strong>rightfr1</strong></h4>
</div>
</div>
</diV>
</div>
</div>
</body>
</html>
--CSS-- (Nur ein Ausschnitt, da das viel zu lang ist und ich hier nicht alles zubomben will!)
html {color: black;
background: -webkit-linear-gradient(90deg, #3C5064, #7092BE);
background: -moz-linear-gradient (90deg, #3C5064; #7092BE);
background: -o-linear-gradient(90deg, #3C5064, #7092BE);
background: linear-gradient(90deg, #3C5064, #7092BE);
font-family: Helvetica, Arial, sans-serif;
margin: 0; padding: 0;}
#bodyframe {position: inline;
margin-top: 20px;
padding: 0px;
min-height: 630px;
max-height: auto;
min-width: 930px;
max-width: auto;
border: 0px dashed silver;
text-align: center;
color: white;
background-color: transparent;
border-collapse: collapse;
z-index: 1;}
#bodyframe {-webkit-animation-name: bodyfadein;
animation-name: bodyfadein;
-webkit-animation-duration: 5.0s;
animation-duration: 5.0s;}
@-webkit-keyframes bodyfadein {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes bodyfadein {0% {opacity: 0;} 100% {opacity: 1;}}
#content {position: inline;
margin-top: 1px;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 0;
min-height: 625px;
max-height: auto;
width: 920px;
border: 0px dashed silver;
text-align: center;
color: white;
background-color: transparent;
border-collapse: collapse;}
/* Eine der ersten 3 Boxen */
#centerframe {position: relative;
float: right;
margin: 0px;
padding: 10px;
min-height: 255px;
width: 270px;
border: 2px solid black;
border-radius: 5px;
text-align: center;
color: white;
background: #3c3c3c;
background: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, #3c3c3c), color-stop(100%, #222222));
background: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background: -ms-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background: linear-gradient(top, #3c3c3c 0%, #222222 100%);
border-collapse: collapse;}
#centerframe {-webkit-animation-name: box4mov;
animation-name: box4mov;
-webkit-animation-duration: 6.4s;
animation-duration: 6.4s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-play-state: running;
animation-play-state: running;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-in-out;}
@-webkit-keyframes box4mov {0% {opacity: 1; right: 1000px; top: 0px;}
50% {opacity: 1; right: 0px; top: 0px;}
75% {opacity: 0.5;}
100% {opacity: 0; right: 0px; top: 0px;}}
@keyframes box4mov {0% {opacity: 1; right: 1000px; top: 0px;}
50% {opacity: 1; right: 0px; top: 0px;}
75% {opacity: 0.5;}
100% {opacity: 0; right: 0px; top: 0px;}}
#centerframe {-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
#centerframe:hover, #centerframe:focus, #centerframe:active
{
box-shadow: 0 0 8px rgba(1, 1, 1, 1.6);
}
/* Quasi die Ersatzbox von der Reservebank - Animation aber nur provisorisch */
#centerfr1 {position: relative;
display: none;
float: right;
margin: 0px;
padding: 10px;
min-height: 255px;
width: 270px;
border: 2px solid black;
border-radius: 5px;
text-align: center;
color: white;
background: #3c3c3c;
background: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, #3c3c3c), color-stop(100%, #222222));
background: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background: -ms-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background: linear-gradient(top, #3c3c3c 0%, #222222 100%);
border-collapse: collapse;}
#centerfr1 {-webkit-animation-name: box7mov;
animation-name: box7mov;
-webkit-animation-duration: 3.8s;
animation-duration: 3.8s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;}
@-webkit-keyframes box7mov {0% {right:1000px; top:0px;}
100% {right:0px; top:0px;}}
@keyframes box7mov {0% {right:1000px; top:0px;}
100% {right:0px; top: 0px;}}
#centerfr1 {-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
#centerfr1:hover, #centerfr1:focus, #centerfr1:active
{
box-shadow: 0 0 8px rgba(1, 1, 1, 1.6);
}
Tja, schlimmer Wildwuchs, aber wenn's hilft.
Danke nochmal und Gruß,
Roadster.
Gunnar Bittersmann