Загрузочный отзывчивый образ с плагином типа jquery type

Question

Я использую bootstrap. моя реакция изображения динамически, но я не могу использовать текст на нем. Я хочу поставить Jquery текста пишущего на изображении, которое должно изменить размер в зависимости от размера экрана вот мой HTML и я использовал этот 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%;} 

Я буду очень благодарен, если кто-то поможет мне это сделать. я хочу JQuery текст плагина на изображение прямо по центру

Answer 1

Вы пропускаете следующую функцию JS:

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

Он находится в документации на GitHub repository. Также обязательно включите 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>

---