Мне нужно чтобы этот скрипт выполнялся только тогда, когда его объект в зоне видимости.
Скрипт эмулирует окрашивание текста.
Буду благодарен за помощь.
$(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>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Никогда не работал с SymfonyНужно добавить на страницу скрипт, как написано в рекомендации, добавить перед закрывающимся тегом "body" Как сделать,...
Есть блок с текстом(скрытым по дефолту) и заголовком(Кнопкой) при клике на который этот текст выезжает и при повторном клике закрываетсяВсё...