Ich habe die letzten zwei Tage damit verbracht, eine Ribbon-Animation zu bekommen, um mit Divs zu arbeiten, so dass ich später Link-Elemente hinzufügen kann, um sie als Menü zu verwenden. Ich habe den Fortschrittsbalken-Animationscode als Inspiration von w3schools verwendet. Die Animation funktioniert super, nur das Problem ist, dass der Code sehr un-DRY ist. Ich habe versucht, den Code zu vereinfachen, indem ich mich nicht im CSS und insbesondere nicht im Javascript wiederholte, aber ich bekam immer noch Probleme mit der Schließung, selbst nachdem ich selbst aufgerufene Funktionen benutzt hatte. Ich wäre dankbar, wenn mir jemand einen Rat geben könnte oder sogar eine Lösung, die meinen Code stark verkürzt, um den gleichen Animationseffekt zu erzielen. Ich weiß, dass ich mehrere Ribbons auf der Seite haben werde, jede mit einer anderen Anzahl von Bändchen, so dass der Code sehr schnell sehr kompliziert werden kann. Der folgende Code ist die Arbeitsversion.Ribbon animation code zu repetitiv
function move1() {
var width = 0;
var elem = document.getElementById("ribbon-part-1");
var id = setInterval(frame, 1);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
function move2() {
var width = 0;
var elem = document.getElementById("ribbon-part-2");
var id = setInterval(frame, 1)
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width += 2;
elem.style.width = width + '%';
}
}
}
function move3() {
var width = 0;
var elem = document.getElementById("ribbon-part-3");
var id = setInterval(frame, 1)
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width += 2;
elem.style.width = width + '%';
}
}
}
function move4() {
var width = 0;
var elem = document.getElementById("ribbon-part-4");
var id = setInterval(frame, 1)
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width += 2;
elem.style.width = width + '%';
}
}
}
function move5() {
var width = 0;
var elem = document.getElementById("end-ribbon");
var id = setInterval(frame, 1)
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width += 2;
elem.style.width = width + '%';
}
}
}
function move() {
setTimeout(move1, 300);
setTimeout(move2, 600);
setTimeout(move3, 900);
setTimeout(move4, 1200);
setTimeout(move5, 1500);
}* {
box-sizing: border-box;
}
.front-ribbon {
position: relative;
/*background-color: grey;*/
height: 23px;
width: 160px;
z-index: 1;
transform: skewY(-11deg);
}
.back-ribbon {
position: relative;
/*background-color: grey;*/
height: 23px;
width: 160px;
transform: skewY(4.7deg);
z-index: -1;
}
#ribbon-part-1 {
background-color: rgb(70, 125, 76);
height: 23px;
width: 0%;
}
#ribbon-part-2 {
background-color: rgb(89, 166, 101);
height: 23px;
width: 0%;
}
/*Including the code below will allow for a reverse progressive bar*/
.front-ribbon #ribbon-part-2 {
display: block;
float: right;
}
#ribbon-part-3 {
background-color: rgb(70, 125, 76);
height: 23px;
width: 0%;
}
#ribbon-part-4 {
background-color: rgb(89, 166, 101);
height: 23px;
width: 0%;
}
/*Including the code below will allow for a reverse progressive bar*/
.front-ribbon #ribbon-part-4 {
display: block;
float: right;
}
#end-ribbon {
fill: rgb(70, 125, 76);
width: 0%;
}<h1>JavaScript ribbon animation</h1>
<div class="back-ribbon">
<div id="ribbon-part-1"></div>
</div>
<div class="front-ribbon">
<div id="ribbon-part-2"></div>
</div>
<div class="back-ribbon">
<div id="ribbon-part-3"></div>
</div>
<div class="front-ribbon">
<div id="ribbon-part-4"></div>
</div>
<svg id="end-ribbon">
<path d="M-6 17 L35 24 L24 10 Z" />
</svg>
<br>
<br>
<br>
<button onclick="move()">Click Me</button>
Wenn Sie keine explizite Frage haben und eine Code-Überprüfung auf Funktionscode möchten, glaube ich, dass Sie mehr Glück haben bei http://codereview.stackexchange.com/ =) – Hodrobond