ループCSSタイプライターエフェクトとテキストの変更

Question

CSSタイプライターエフェクトをループし、各ループのテキストを変更する必要があります。ここでは、タイプライターエフェクトに使用しているコードを示します。私はjavascriptを使う必要があると推測していますが、これについてどうやって行くのか分かりません。どのように私はこれを行うことができるかに関する任意のアイデア？

.typewriter h1 { 
 
    overflow: hidden; /* Ensures the content is not revealed until the animation */ 
 
    border-right: .15em solid orange; /* The typwriter cursor */ 
 
    white-space: nowrap; /* Keeps the content on a single line */ 
 
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */ 
 
    letter-spacing: .15em; /* Adjust as needed */ 
 
    animation: 
 
    typing 3.5s steps(40, end), 
 
    blink-caret .75s step-end infinite; 
 
} 
 

 

 
body { 
 
    background: #333; 
 
    color: #fff; 
 
    font-family: monospace; 
 
    padding-top: 5em; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
/* DEMO-SPECIFIC STYLES */ 
 
.typewriter h1 { 
 
    overflow: hidden; /* Ensures the content is not revealed until the animation */ 
 
    border-right: .15em solid orange; /* The typwriter cursor */ 
 
    white-space: nowrap; /* Keeps the content on a single line */ 
 
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */ 
 
    letter-spacing: .15em; /* Adjust as needed */ 
 
    animation: 
 
    typing 3.5s steps(40, end), 
 
    blink-caret .75s step-end infinite; 
 
} 
 

 
/* The typing effect */ 
 
@keyframes typing { 
 
    from { width: 0 } 
 
    to { width: 100% } 
 
} 
 

 
/* The typewriter cursor effect */ 
 
@keyframes blink-caret { 
 
    from, to { border-color: transparent } 
 
    50% { border-color: blue; } 
 
}

<div class="typewriter"> 
 
    <h1>The cat and the hat.</h1> 
 
</div>

}

Answer 1

（ご希望の場合、またはJavaSript）これはjQueryを介して行うことができます。単純に、アニメーションが完了するまで待ってから、含まれているHTMLを置き換えてください。

setTimeout(function() { 
 
    $(".typewriter").html("<h1>This is a really cool string</h1>") 
 
},3500);

.typewriter h1 { 
 
    overflow: hidden; /* Ensures the content is not revealed until the animation */ 
 
    border-right: .15em solid orange; /* The typwriter cursor */ 
 
    white-space: nowrap; /* Keeps the content on a single line */ 
 
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */ 
 
    letter-spacing: .15em; /* Adjust as needed */ 
 
    animation: 
 
    typing 3.5s steps(40, end), 
 
    blink-caret .75s step-end infinite; 
 
} 
 

 

 
body { 
 
    background: #333; 
 
    color: #fff; 
 
    font-family: monospace; 
 
    padding-top: 5em; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
/* DEMO-SPECIFIC STYLES */ 
 
.typewriter h1 { 
 
    overflow: hidden; /* Ensures the content is not revealed until the animation */ 
 
    border-right: .15em solid orange; /* The typwriter cursor */ 
 
    white-space: nowrap; /* Keeps the content on a single line */ 
 
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */ 
 
    letter-spacing: .15em; /* Adjust as needed */ 
 
    animation: 
 
    typing 3.5s steps(40, end), 
 
    blink-caret .75s step-end infinite; 
 
} 
 

 
/* The typing effect */ 
 
@keyframes typing { 
 
    from { width: 0 } 
 
    to { width: 100% } 
 
} 
 

 
/* The typewriter cursor effect */ 
 
@keyframes blink-caret { 
 
    from, to { border-color: transparent } 
 
    50% { border-color: blue; } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="typewriter"> 
 
    <h1>The cat and the hat.</h1> 
 
</div>

Answer 2

はい、あなたは、少なくともアニメーションの終了を検出するために、いくつかのスクリプトが必要になります。次に、HTMLコンテンツをリフレッシュするために、すべてのメッセージを配列に表示してループすることができます。次に、表示されるテキストの長さに応じて、速度を調整する必要があります。

var messages=["message1","message2 message2 message2","message3 message3"]; 
 
var rank=0; 
 

 
// Code for Chrome, Safari and Opera 
 
document.getElementById("myTypewriter").addEventListener("webkitAnimationEnd", changeTxt); 
 

 
// Standard syntax 
 
document.getElementById("myTypewriter").addEventListener("animationend", changeTxt); 
 

 
function changeTxt(e){ 
 
    _h1 = this.getElementsByTagName("h1")[0]; 
 
    _h1.style.webkitAnimation = 'none'; // set element animation to none 
 
    setTimeout(function() { // you surely want a delay before the next message appears 
 
     _h1.innerHTML=messages[rank]; 
 
     var speed =3.5*messages[rank].length/20; // adjust the speed (3.5 is the original speed, 20 is the original string length 
 
     _h1.style.webkitAnimation = 'typing '+speed+'s steps(40, end), blink-caret .75s step-end infinite'; // switch to the original set of animation  
 
     (rank===messages.length-1)?rank=0:rank++; // if you have displayed the last message from the array, go back to the first one, else go to next message 
 
    }, 1000); 
 
}

.typewriter h1 { 
 
    overflow: hidden; /* Ensures the content is not revealed until the animation */ 
 
    border-right: .15em solid orange; /* The typwriter cursor */ 
 
    white-space: nowrap; /* Keeps the content on a single line */ 
 
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */ 
 
    letter-spacing: .15em; /* Adjust as needed */ 
 
    animation: 
 
    typing 3.5s steps(40, end), 
 
    blink-caret .75s step-end infinite; 
 
} 
 

 

 
body { 
 
    background: #333; 
 
    color: #fff; 
 
    font-family: monospace; 
 
    padding-top: 5em; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 

 
/* The typing effect */ 
 
@keyframes typing { 
 
    from { width: 0 } 
 
    to { width: 100% } 
 
} 
 

 
/* The typewriter cursor effect */ 
 
@keyframes blink-caret { 
 
    from, to { border-color: transparent } 
 
    50% { border-color: blue; } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="typewriter" id="myTypewriter"> 
 
    <h1>The cat and the hat.</h1> 
 
</div>

も異なる構文https://www.w3schools.com/jsref/prop_style_animation.asp

をチェック