jqueryタイプのライタープラグインによるブートストラップ応答イメージ

Question

私はブートストラップを使用しています。私のイメージは動的に応答しますが、テキストを使用することはできません。私はここに私のhtmlがある画面サイズに応じてサイズを変更する必要があり、画像上のjqueryのタイプライターのテキストを配置したいと私はこのjQueryプラグインを使用http://www.mattboldt.com/demos/typed-js/ここ

<div class="container-fluid"> 
<div class="row-fluid"> 
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 centerimg"> 
<img class="img-responsive" src="img/headerBackground.jpg"> 
<div class="wrap"> 
<div class="type-wrap"> 
<div id="typed-strings"> 
<span>Typed.js is a <strong>jQuery</strong> plugin.</span> 
<p>It <em>types</em> out sentences.</p> 
<p>And then deletes them.</p> 
<p>Try it out!</p> 
</div> 
<span id="typed" style="white-space:pre;"></span> 
</div> 
</div> 
</div> 
</div> 
</div> 

は私が私のイメージでこのテキストを配置するために使用しています私のCSSです

.col-lg-12.col-md-12.col-sm-12.col-xs-12.centerimg{ 
display:block; 
margin:auto; 
position: relative;} 
.col-lg-12.col-md-12.col-sm-12.col-xs-12.centerimg p{ 
position: absolute; 
top: 2%; 
left: 2%;} 

もし私がそれをするのを手伝ってくれたら非常に感謝します。それはgithubのrepositoryのドキュメントである

$(function() { 
    $("#typed").typed({ 
    stringsElement: $('#typed-strings') 
    }); 
}); 

：私はあなたのjs以下の機能が欠落している右中央

Answer 1

上の画像上のjqueryのプラグインのテキストをしたいです。また、jqueryも含めてください。

$(function() { 
 
    $("#typed").typed({ 
 
    stringsElement: $('#typed-strings') 
 
    }); 
 
});

.col-lg-12.col-md-12.col-sm-12.col-xs-12.centerimg { 
 
    display: block; 
 
    margin: auto; 
 
    position: relative; 
 
    max-width: 590px; 
 
} 
 
.col-lg-12.col-md-12.col-sm-12.col-xs-12.centerimg p { 
 
    position: absolute; 
 
    top: 2%; 
 
    left: 2%; 
 
} 
 
#typed { 
 
    color: #fff; 
 
} 
 
.wrap { 
 
    position: absolute; 
 
    transform: translate(0, 50%); 
 
    top: 36%; 
 
    left: 0; 
 
    width: 100%; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.4/typed.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div class="row-fluid"> 
 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 centerimg"> 
 
     <img class="img-responsive" src="http://www.martin4sturgis.com/wp-content/uploads/2015/02/computerScreen.png"> 
 
     <div class="wrap"> 
 
     <div class="type-wrap"> 
 
      <div id="typed-strings"> 
 
      <span>Typed.js is a <strong>jQuery</strong> plugin </span> 
 
      <p>It <em>types</em> out sentences.</p> 
 
      <p>And then deletes them.</p> 
 
      <p>Try it out!</p> 
 
      </div> 
 
      <span id="typed" style="white-space:pre;"></span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

---