Wie css3-Animation via js beinflussen?

Ich habe ein Script mit CSS3-Animation (Slider) und möchte nun die Möglichkeit für den User einbauen, per Button vor und zurück springen zu können.

Im ersten Versuch habe ich alternative Keyframes angelegt und diese per js austauschen lassen. Das funktioniert auch, das optische Ergebnisse ist allerdings sehr unterirdisch.

Nun wollte ich mal gucken wie es sich auswirkt, wenn man den Bereich per js einfach nur verschiebt. Dabei habe ich festgestellt, dass das Element nicht darauf reagiert.

Da ich nicht verstehe weshalb, freue ich mich, wenn mir hier jemand auf die Sprünge helfen kann.

CSS: (beispielhaft, nur der relevante Teil):

#beispiel_slider {animation:slide 30s infinite;-moz-animation:slide 30s infinite;-webkit-animation:slide 30s infinite;-o-animation:slide 30s infinite;}

@-webkit-keyframes slide {0% {left:0px;} 30% {left:0px} 33.33% {left:-100%} 63.34% {left:-100%} 66.67% {left:-200%} 96.67% {left:-200%} 100% {left:-300%} }
@-moz-keyframes slide {0% {left:0px;} 30% {left:0px} 33.33% {left:-100%} 63.34% {left:-100%} 66.67% {left:-200%} 96.67% {left:-200%} 100% {left:-300%} }
@-o-keyframes slide {0% {left:0px;} 30% {left:0px} 33.33% {left:-100%} 63.34% {left:-100%} 66.67% {left:-200%} 96.67% {left:-200%} 100% {left:-300%} }
@keyframes slide {0% {left:0px;} 30% {left:0px} 33.33% {left:-100%} 63.34% {left:-100%} 66.67% {left:-200%} 96.67% {left:-200%} 100% {left:-300%} }

JS: (beispielhaft):

function verschiebung() {
document.getElementById("beispiel_slider").style.left = "0px";	
}

Nach meinem Verständnis sollte die Funktion den Bereich zumindest kurzzeitig wieder auf den ursprünglichen Punkt zurück schieben. Funktioniert aber nicht.

Besten Dank im Voraus.

Computer, Animation, Technik, JavaScript, Technologie, Webdesign, CSS3, Spiele und Gaming
2 Antworten
Zwei Modals "in Reihe schalten" - wie geht's richtig?

Moin,

für ein aktuelles Projekt möchte ich auf einen vom Nutzer über den Signup-Button abgesendeten Modal mit einem weiteren Modal reagieren. Allerdings poppt dieses nach Absenden des ersten Modals nur für einen Bruchteil einer Sekunde auf und schließt sich im Anschluss wieder. Hat jemand eine Idee, wie ich das beheben kann?

html-Snippet:

<div>
	<a class="am-button"><img src="img"></a>
	<a class="am-button" id="modalAddAccountOpen"><img src="img"></a>
	<div class="am-modal-addaccount" id="modalAddAccount">
		<div class="am-modal-addaccount-content">
			<span class="am-modal-addaccount-close" id="modalAddAccountClose" title="Verwerfen">×</span>
			<p>Benutzer hinzufügen</p>
			<form action="inc/signup.inc.php" method="POST">
				<input class="am-modal-addaccount-input" type="text" name="signup-first" placeholder="Vorname">
				<input class="am-modal-addaccount-input" type="text" name="signup-last" placeholder="Nachname">
				<input class="am-modal-addaccount-input" type="text" name="signup-email" placeholder="E-Mail-Adresse">
				<input class="button" type="submit" name="signup-submit" id="modalShowAccountOpen" value="Hinzufügen">
			</form>
		</div>
	</div>
	<script type="text/javascript" src="js/accountmanagement/modalAddAccount.js"></script>
	<div class="am-modal-showaccount" id="modalShowAccount">
		<div class="am-modal-showaccount-content">
			<span class="am-modal-showaccount-close" id="modalShowAccountClose" title="Schließen">×</span>
			<p>Test</p>
			<form>
				<input class="button" type="submit" id="modalShowAccountClose" value="Schließen">
			</form>
		</div>
	</div>
	<script type="text/javascript" src="js/accountmanagement/modalShowAccount.js"></script>
</div>

Der relevante CSS-Snippet:

.am-modal-addaccount{
	position: fixed;
	display: none;
	z-index: 3;
}

.am-modal-showaccount{
	position: fixed;
	display: none;
	z-index: 3;
}

Der js-Code:

var modalAddAccountOpen = document.getElementById('modalAddAccountOpen');
var modalAddAccount = document.getElementById('modalAddAccount');
var modalAddAccountClose = document.getElementById('modalAddAccountClose');

modalAddAccountOpen.onclick = function(){ modalAddAccount.style.display = "block"; }

modalAddAccountClose.onclick = function(){ modalAddAccount.style.display = "none"; }

var modalShowAccountOpen = document.getElementById('modalShowAccountOpen'); var modalShowAccount = document.getElementById('modalShowAccount'); var modalShowAccountClose = document.getElementById('modalShowAccountClose');

modalShowAccountOpen.onclick = function(){ modalShowAccount.style.display = "block"; }

modalShowAccountClose.onclick = function(){
	modalShowAccount.style.display = "none";
}

LG

Website, HTML, Programmieren, CSS, JavaScript, JS, html5, CSS3
1 Antwort
HTML, CSS: Navigation funktioniert falsch?

Hallo, ich habe ein Problem. Und zwar habe ich folgende Webseite erstellt, jedoch ist meine Navigation nicht wie gewünscht dauerhaft am oberen Bildschirmrand, sondern ist einfach nur oben an meiner Webseite.

HTML:

<!DOCTYPE html>
<html>
  <head>
  <title>Webseite 2</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <meta charset="utf-8">
   
  </head>
   
  <body>
     
  <div class="navigation">
    <div class="wapper">
      <div id="logo"><p>S</p></div>
       
      <a target="_blank" href="#" >Kontakt</a>
      <a target="_blank" href="#" >Mehr</a>   
      <a target="_blank" href="#" >Shop</a>
      <a target="_blank" href="" >Home</a>
      
    </div>
  </div>
   
  <div id="banner">
  <img src="Bilder/banner.jpg">
  </div>
  <div>
    <p>  ....Text..... </p>   
  </div>
  </body>
</html>

CSS:

{
  margin: 0;
  padding: 0;
  font-family: fantasy;
}
.navigation {
   width: 100%;
  height: 100px;
  background-color: rgba(250,250,250,0.8);
  position: fixed;
  z-index: 10;
  flex-basis: 0px;
  flex-shrink: 1;
}
#logo{
  height: 80px;
  width: 80px;
  margin: 10px;
  float: left;
}
#logo p{
  line-height: 90px;
  color: black;
  font-size: 6em;
  font-family: Rocket Rinder;
}
.navigation a {
  color: black;
  font-family: Rocket Rinder;
  text-decoration: none;
  font-size: 2em;
  margin-right: 40px;
  line-height: 100px;
  float: right;
}
.navigation a:hover {
  color: blueviolet;
}
.wapper {
  width: 960px;
  max-width: 90%;
  margin: 0 auto;
}
#banner {
  z-index: 0;
  width: 100%;
  height: auto;  
  background-size: cover;
}
#banner img{
  width: 100%;
}   

Website, HTML, CSS, html5, HTML Code, CSS3, HTML 5
3 Antworten
HTML/CSS: Navigation verschiebt sich beim Verkleinern der Seite?

Als Informatik-Hausaufgabe habe ich, dass ich eine Seite erstellen muss mit HTML und CSS. Ich habe nun eine Navigation oben, aber wenn ich die Seite kleiner mache (den Tab), verschiebt sich die Navigation nach unten. Hier die HTML-Datei:

<body>
  <div id="navigation">
    <div id="logo">
    </div>
    <div class="navi">
      <a href="#"> Home </a>
      <a href="#"> Über uns</a>
      <a href="#"> Produkte </a>
      <a href="#"> Kontakt</a>
      <a href="#"> Impressum</a>
    </div>
  </div>
</body>

CSS:

#navigation {
  height: 12%;
  width: 70%;
  background-color: #a87a7a;
  margin: auto 0;
  border-style: double;
  border-radius: 80px;
  border-color: #9a0303;
  position: fixed;
  margin-left: 15%;
  margin-right: 15%;
  display: inline-block;
  white-space: nowrap;
  min-width: 50%
}

/* logo */

#logo {
  width: 60px;
  height: 60px;
  background-image: url(logo.png);
  background-position: center;
  background-size: cover;
  float: left;
  margin-top: 10px;
  margin-right: 15px;
  margin-left: 15px;
  border-style: hidden;
  border-radius: 20px
}

/* background */

body {
  background-color: #d6c6c6;
  float: left;
}

/* Home */

.navi {
  font-size: auto 0;
  text-decoration: none;
  margin-right: 15%;
  font-family: verdana;
  color: aliceblue;
  min-width: 0%;
  float: left;
  position: fixed;
  line-height: 3.5;
  margin: auto 0;
}

Ich bitte um Hilfe.

Computer, Website, HTML, CSS, html5, CSS3
6 Antworten

Meistgelesene Fragen zum Thema CSS3