JS | einfachstes Animationsproblem - es will einfach nicht funktionieren

[Lena Sommer]

Hallo zusammen,

Ich bin verzweifelt – wirklich! Ich bin Designstudentin und habe mir eine Portfolioseite programmiert, fast alles läuft wunderbar. Nur mit JS geht gar nichts. Html und CSS verstehe ich, hinter js bin ich nie gekommen.

Es gibt einen Slider mit meinen Skills in verschiedenen Programmen. Die "bars" sliden von links nach rechts mit einer CSS-Animation. DAS (ziemlich primitive) PROBLEM: Wie klappt es, die Animation auf Scrollen zu triggern, so dass sie erst startet, wenn die Skill-Bars sichtbar sind?

Das html sieht folgendermaßen aus:

		<div data-animation="flipInX" data-timeout="400">
					<ul id="skill">
						<li><span class="bar cs"></span><h3>InDesign, Illustrator and Photoshop</h3></li>
						<li><span class="bar c4d"></span><h3>CINEMA 4D</h3></li>
						<li><span class="bar htmlcss"></span><h3>HTML and CSS</h3></li>
						<li><span class="bar sketch"></span><h3>Sketch</h3></li>
					</ul>
				</div>

html

Im CSS:

#skill { 
	list-style: none;
	font: 12px "Source Sans Pro", sans-serif;
	min-width: 320px;
	max-width: 480px;
	overflow: hidden;
	position: relative;
	line-height: 2em;
	padding-top: 40px;
	padding-left: 0px;
	margin: auto;
}

#skill li { 
	margin-bottom:50px; 
	background:white;
	background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(white));
	background-image: -moz-gradient(linear, left top, left bottom, from(white), to(white));
	background-image: -o-gradient(linear, left top, left bottom, from(white), to(white));
	background-image: -webkit-linear-gradient(top, white, white);
	background-image: -moz-linear-gradient(top, white, white);
	background-image: -ms-linear-gradient(top, white, white);
	background-image: -o-linear-gradient(top, white, white);
	background-image: linear-gradient(top, white, white);  
	height:12px; 
	border-radius:2px; 	   
}

#skill li h3 { 
	position:relative; 
	top:-25px;
	font-weight: 400;
}

.bar { 
	height:11px;  
	position:absolute;
	border-radius:2px;	 
}

.cs {
	width:90%; 
	-moz-animation:cs 3s ease-out;
	-o-animation:cs 3s ease-out;
	-webkit-animation:cs 3s ease-out;
	background-color: #00C391;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#00C391), to(#00C391));
	background-image: -webkit-linear-gradient(top, #00C391, #00C391);
	background-image: -moz-linear-gradient(top, #00C391, #00C391);
	background-image: -ms-linear-gradient(top, #00C391, #00C391);
	background-image: -o-linear-gradient(top, #00C391, #00C391);
	background-image: linear-gradient(top, #00C391, #00C391);
}

.c4d {
	width:40%;
	-o-animation:c4d 3s ease-out;
	-moz-animation:c4d 3s ease-out;
	-webkit-animation:c4d 3s ease-out;
	background-color: #00C391;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#00C391), to(#00C391));
	background-image: -webkit-linear-gradient(top, #00C391, #00C391);
	background-image: -moz-linear-gradient(top, #00C391, #00C391);
	background-image: -ms-linear-gradient(top, #00C391, #00C391);
	background-image: -o-linear-gradient(top, #00C391, #00C391);
	background-image: linear-gradient(top, #00C391, #00C391);
}

.htmlcss {
	width:60%;
	-o-animation:htmlcss 3s ease-out;
	-moz-animation:htmlcss 3s ease-out;
	-webkit-animation:htmlcss 3s ease-out;
	background-color: #00C391;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#00C391), to(#00C391));
	background-image: -webkit-linear-gradient(top, #00C391, #00C391);
	background-image: -moz-linear-gradient(top, #00C391, #00C391);
	background-image: -ms-linear-gradient(top, #00C391, #00C391);
	background-image: -o-linear-gradient(top, #00C391, #00C391);
	background-image: linear-gradient(top, #00C391, #00C391);
}

.sketch {
	width:80%;
	-o-animation:sketch 3s ease-out;
	-moz-animation:sketch 3s ease-out;
	-webkit-animation:sketch 3s ease-out;
	background-color: #00C391;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#00C391), to(#00C391));
	background-image: -webkit-linear-gradient(top, #00C391, #00C391);
	background-image: -moz-linear-gradient(top, #00C391, #00C391);
	background-image: -ms-linear-gradient(top, #00C391, #00C391);
	background-image: -o-linear-gradient(top, #00C391, #00C391);
	background-image: linear-gradient(top, #00C391, #00C391)	
}

@-o-keyframes cs {0%  { width:0px;} 100%{ width:90%;}  }
@-o-keyframes c4d        { 0%  { width:0px;} 100%{ width:40%;}  }
@-o-keyframes htmlcss     { 0%  { width:0px;} 100%{ width:60%;}  }
@-o-keyframes sketch   { 0%  { width:0px;} 100%{ width:80%;}  }

@-moz-keyframes cs {0%  { width:0px;} 100%{ width:90%;}  }
@-moz-keyframes c4d        { 0%  { width:0px;} 100%{ width:40%;}  }
@-moz-keyframes htmlcss     { 0%  { width:0px;} 100%{ width:60%;}  }
@-moz-keyframes sketch   { 0%  { width:0px;} 100%{ width:80%;}  }

@-webkit-keyframes cs       { 0%  { width:0px;} 100%{ width:90%;}  }
@-webkit-keyframes c4d        { 0%  { width:0px;} 100%{ width:40%;}  }
@-webkit-keyframes htmlcss      { 0%  { width:0px;} 100%{ width:60%;}  }
@-webkit-keyframes sketch   { 0%  { width:0px;} 100%{ width:80%;}  }

Wenn mir jemand auf die Sprünge helfen könnte, wäre ich sehr dankbar. Wie hat das JS auszusehen? Habe sämtliche Beispiele aus dem Internet schon ausprobiert und eingefügt und es passiert nie was. Vermutlich ist das html oder css durch die ganze Hin- und Her-Kopiererei auch nicht mehr korrekt. Im Moment bin ich leider blind für das Ganze und sehe die Fehler nicht.

Vielen lieben Dank schon mal im Voraus, Liebe Grüße:)

[Gunnar Bittersmann]

@@Lena Sommer

Es gibt einen Slider mit meinen Skills in verschiedenen Programmen.

Und damit willst du die Skills deiner Leserschaft testen?

Karusselle auf Webseiten sollte man in den allermeisten Fällen vermeiden. Lass die Nutzer die Inhalte in ihrer eigenen Geschwindigkeit lesen!

Im Moment bin ich leider blind für das Ganze und sehe die Fehler nicht.

Und wie sollten wir die ohne Online-Beispiel sehen?

Einen Fehler – der wiederholt auftritt – sehe ich aber tatsächlich:

background:white; background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(white)); background-image: -moz-gradient(linear, left top, left bottom, from(white), to(white)); background-image: -o-gradient(linear, left top, left bottom, from(white), to(white)); background-image: -webkit-linear-gradient(top, white, white); background-image: -moz-linear-gradient(top, white, white); background-image: -ms-linear-gradient(top, white, white); background-image: -o-linear-gradient(top, white, white); background-image: linear-gradient(top, white, white);

Mal abgesehen davon, dass top kein gültiger Richtungswert für linear-gradient ist und die allermeisten Präfixe völlig sinnlos sind: Was soll das Ganze? Gradient von weiß nach weiß? Ostfriesische Nationalflagge?

LLAP 🖖