Как запустить этот скрипт когда его объект виден?

189
24 августа 2017, 18:57

Мне нужно чтобы этот скрипт выполнялся только тогда, когда его объект в зоне видимости.

Скрипт эмулирует окрашивание текста.

Буду благодарен за помощь.

$(window).click(function() { 
  if ($('#transparent').html()) 
    reset(); 
  else 
    move_symbols(); 
}); 
 
const n = 3;  // Число перекидываемых символов за один раз (влияет на скорость) 
 
function move_symbols()  { 
// Перекидывает один несколько символов из одного <span> в другой, из #ordinary в #transparent 
  var a = $('.transparent').html(); 
  var b = $('.ordinary').html();  
  a += b.substring(0, n); 
  b = b.substring(n); 
  $('.transparent').html(a); 
  $('.ordinary').html(b); 
   
  // Если не достигнут конец текста, то повторить через короткое время 
  if (b) id = setTimeout(move_symbols, 1); 
} 
 
function reset() { 
  clearTimeout (id); 
  var a = $('.transparent').html(); 
  var b = $('.ordinary').html();  
  b = a + b; 
  $('.transparent').html(''); 
  $('.ordinary').html(b); 
}
.block + .block { 
margin-top: 200px; 
} 
.block { 
position: relative; 
} 
 
.not-marked {z-index: 1; 
position: absolute; 
} 
.selected {background: yellow;} 
.transparent {opacity: 0;} 
.ordinary {color: #cccccc; background: white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="block"> 
 
<div class="not-marked"> 
<span class="transparent"></span><span class="ordinary">Notre feuille de route etait claire : valoriser l’incroyable apport de Citroen a l’histoire de l’industrie automobile et celebrer son eternelle originalite en produisant un site a la navigation innovante. Pour ce faire, nous avons imagine une veritable plongee virtuelle dans 49 des modeles les plus iconiques du constructeur. De la 10 HP Type A de 1919 a la C3 3eme generation en passant par des modeles de competition mais egalement des concept cars, chaque vehicule a droit a des vues panoramiques exterieures mais aussi interieures.</span> 
</div> 
 
<div> 
<span class=selected>Notre feuille de route</span> etait claire : <span class=selected>valoriser</span> l’incroyable apport de Citroen a l’histoire de l’industrie automobile et <span class=selected>celebrer</span> son eternelle originalite en produisant un site a la navigation innovante. Pour ce faire, nous avons imagine une veritable plongee virtuelle dans <span class=selected>49 des modeles les plus iconiques du constructeur.</span> De la 10 HP Type A de 1919 a la C3 3eme generation en passant par des modeles de competition mais egalement des concept cars, chaque vehicule a droit a des vues <span class=selected>panoramiques exterieures mais aussi interieures</span>. 
</div> 
 
</div> 
 
<div class="block"> 
 
<div class="not-marked"> 
<span class="transparent"></span><span class="ordinary">Notre feuille de route etait claire : valoriser l’incroyable apport de Citroen a l’histoire de l’industrie automobile et celebrer son eternelle originalite en produisant un site a la navigation innovante. Pour ce faire, nous avons imagine une veritable plongee virtuelle dans 49 des modeles les plus iconiques du constructeur. De la 10 HP Type A de 1919 a la C3 3eme generation en passant par des modeles de competition mais egalement des concept cars, chaque vehicule a droit a des vues panoramiques exterieures mais aussi interieures.</span> 
</div> 
 
<div> 
<span class=selected>Notre feuille de route</span> etait claire : <span class=selected>valoriser</span> l’incroyable apport de Citroen a l’histoire de l’industrie automobile et <span class=selected>celebrer</span> son eternelle originalite en produisant un site a la navigation innovante. Pour ce faire, nous avons imagine une veritable plongee virtuelle dans <span class=selected>49 des modeles les plus iconiques du constructeur.</span> De la 10 HP Type A de 1919 a la C3 3eme generation en passant par des modeles de competition mais egalement des concept cars, chaque vehicule a droit a des vues <span class=selected>panoramiques exterieures mais aussi interieures</span>. 
</div> 
 
</div> 
<div class="block"> 
 
<div class="not-marked"> 
<span class="transparent"></span><span class="ordinary">Notre feuille de route etait claire : valoriser l’incroyable apport de Citroen a l’histoire de l’industrie automobile et celebrer son eternelle originalite en produisant un site a la navigation innovante. Pour ce faire, nous avons imagine une veritable plongee virtuelle dans 49 des modeles les plus iconiques du constructeur. De la 10 HP Type A de 1919 a la C3 3eme generation en passant par des modeles de competition mais egalement des concept cars, chaque vehicule a droit a des vues panoramiques exterieures mais aussi interieures.</span> 
</div> 
 
<div> 
<span class=selected>Notre feuille de route</span> etait claire : <span class=selected>valoriser</span> l’incroyable apport de Citroen a l’histoire de l’industrie automobile et <span class=selected>celebrer</span> son eternelle originalite en produisant un site a la navigation innovante. Pour ce faire, nous avons imagine une veritable plongee virtuelle dans <span class=selected>49 des modeles les plus iconiques du constructeur.</span> De la 10 HP Type A de 1919 a la C3 3eme generation en passant par des modeles de competition mais egalement des concept cars, chaque vehicule a droit a des vues <span class=selected>panoramiques exterieures mais aussi interieures</span>. 
</div> 
 
</div>

READ ALSO
Symfony добавить кнопку

Symfony добавить кнопку

Никогда не работал с SymfonyНужно добавить на страницу скрипт, как написано в рекомендации, добавить перед закрывающимся тегом "body" Как сделать,...

227
Блок collapse в PC версии сайта должен быть открыт

Блок collapse в PC версии сайта должен быть открыт

Есть блок с текстом(скрытым по дефолту) и заголовком(Кнопкой) при клике на который этот текст выезжает и при повторном клике закрываетсяВсё...

217