静的HTMLのTyped.js/strings

Question

今、私はTyped.js jQueryプラグインの使用に苦労しています。

私がしたいのは、strings配列を使用して文字列を挿入するのではなく、そのページにHTML divを置き、そこから読み取ることです。 ボットや検索エンジン、JavaScriptが無効になっているユーザーには、ページのテキストが表示されるようにします。

<div id="text1"> 

    <p> 
    Hello, 
    <br> 
    <br> 
    bla bla bla 
    <br> 
    <br> 
    bla bla bla. 
    </p> 

</div> 

<span id="typed"></span> 

<script> 
$(function(){ 
    $("#typed").typed({ 
     stringsElement: $('#text1') 
     typeSpeed: 50 
    }); 
}); </script> 

また、spanが何であるか分かりません。あなたは何ができるか

Answer 1

一つの問題は、あなたがTyped.jsの最新バージョンを持っていないということかもしれません。バージョン1.1.1はcdnjs.comとBowerで入手可能な最新バージョンですが、コードon GitHubはその後更新されましたが、公開されていません。最新のREADMEに記載されているstringsElement機能は、公開されたバージョン1.1.1ではなく最新のcode in the repoでのみ動作します。他のユーザーnoticed this problem too。

さらに、$('#text1')の後にカンマを追加して構文エラーを修正する必要があります。 JavaScriptオブジェクトのリテラル{}では、最後のものを除いて、すべてkey: valueのペアの後にカンマが必要です。

$(function() { 
 
    $("#typed").typed({ 
 
    stringsElement: $('#text1'), 
 
    typeSpeed: 50 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://raw.githubusercontent.com/mattboldt/typed.js/master/dist/typed.min.js"></script> 
 

 

 
<div id="text1"> 
 
    <p> 
 
    Hello, 
 
    <br> 
 
    <br> 
 
    bla bla bla 
 
    <br> 
 
    <br> 
 
    bla bla bla. 
 
    </p> 
 
</div> 
 

 
<span id="typed"></span>

また、これはおそらく意図的ですが、ちょうどあなたの <div id="text1">を例 in the READMEは異なるフォーマットされていることに注意してください。一緒にそれら二つの修正を置く

は、あなたがこの作業コードを取得します。多くの<p>を使用する代わりに、<br>で区切られた複数の行を含む1つの<p>を使用しています。これの効果は、プラグインが各行の上にバックスペースすることはありませんが、一度にすべてを書き込むことです。それがあなたが望むものでない場合は、READMEのフォーマットを使用してください。

spanの内容は、入力したアニメーションが表示されるページの要素です。そのページの周りにspanを移動して、好きなようにそれをCSSでスタイルすることができます。 $("#typed")と書くと、spanがコード内に参照されます。spanにはid="typed"が選択されています。次に.typed()と呼んで、Typed.jsプラグインにアニメートされたテキストをその要素の中に入れるように指示します。

Answer 2

これはあなたのために働く必要がありますtext1

// Working for IE and Others 
var textContent = $('#text1').innerText || $('#text1').textContent; 
// Use string for the typed.js 
$(function(){ 
    $("#typed").typed({ 
     stringsElement: textContent, 
     typeSpeed: 50 
    }); 
}); 

のdivのテキストコンテンツを使用している、あなたはいくつかの余分な解析を行う必要があるとコンテンツと一緒に遊んが、それは十分に簡単です可能性があります。

JSFiddle