2
リボンアニメーションをdivで使用するために最後の2日間を費やしました。後でリボンのリンク要素を追加してメニューとして機能させることができます。私はw3schoolsからのインスピレーションとしてプログレスバーのアニメーションコードを使用しました。アニメーションは素晴らしいですが、問題はコードが非常に不安定であることだけです。私はCSSで、特にjavascriptではなく、自分自身を繰り返さないことでコードを単純化しようとしましたが、自己呼び出し関数を使用した後でもクロージャーの問題を解決し続けました。誰かが私に助言を与えることができれば、私のコードを大幅に短縮して同じアニメーション効果を得ることができれば、私は素晴らしいことになるでしょう。ページにはリボン層の数が異なるリボンがいくつかあるので、コードは非常に複雑になりがちです。 N.B以下のコードは作業バージョンです。リボンアニメーションのコードがあまりにも反復する
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>
明示的な質問がなく、機能コードのコードレビューが必要な場合は、http：//codereview.stackexchange.com/ =で運がよければと思います。 – Hodrobond