Javascript-форум - Текстовый эффект

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Текстовый эффект (https://javascript.ru/forum/dom-window/47040-tekstovyjj-ehffekt.html)

cript

06.05.2014 14:08

Текстовый эффект

Приветствую!
Недавно нашел такой скрипт, который создает эффект растягивания текста

<script>var sizes = new Array("0px", "1px", "2px","4px", "8px");
sizes.pos = 0;
function rubberBand()
{
var el = document.all.elastic;
if (null == el.direction)
el.direction = 1;
else if ((sizes.pos > sizes.length - 2) ||
(0 == sizes.pos))
el.direction *= -1;
el.style.letterSpacing = sizes[sizes.pos += el.direction];
}
window.tm = setInterval('rubberBand()', 100);
</script>
<font color="#ffd700" id="elastic">Text Текст</font>

Подскажите как сделать так, чтобы, например после второго сжатия эффект прекращался?

jsnb	06.05.2014 14:36

<script>var sizes = new Array("0px", "1px", "2px","4px", "8px");
sizes.pos = 0;
var count = 0;
function rubberBand()
{
var el = document.all.elastic;
if (sizes.pos === 0) count++;
if (count > 2) {
  clearInterval(window.tm);
  count = 0;
  return;
}
if (null == el.direction)
el.direction = 1;
else if ((sizes.pos > sizes.length - 2) ||
(0 == sizes.pos))
el.direction *= -1;
el.style.letterSpacing = sizes[sizes.pos += el.direction];
}
window.tm = setInterval(rubberBand, 100);
</script>
<font color="#ffd700" id="elastic">Text Текст</font>

cript

06.05.2014 14:53

jsnb,
Премного благодарен.
Случайно не знаете как сделать так, чтобы текст помимо растягивания (letterSpacing) уменьшался и увеличивался в размере?

jsnb	06.05.2014 15:08

Цитата:

Сообщение от cript (Сообщение 310606)

Случайно не знаете как сделать так, чтобы текст помимо растягивания (letterSpacing) уменьшался и увеличивался в размере?

Менять fontSize.

cript

06.05.2014 15:11

jsnb,
Спасибо, сработало!

cript

06.05.2014 15:14

Только вот еще не пойму, если добавить второй массив для fontSize, как ту быть?
var sizes2 = new Array("12px", "15px", "19px");
....
el.style.fontSize = sizes2[sizes2.pos += el.direction]; // не срабатывает

jsnb	06.05.2014 15:25

Цитата:

Сообщение от cript (Сообщение 310611)

Сделать во втором массиве столько же элементов сколько в первом и использовать тот же счетчик и для второго массива:

el.style.fontSize = sizes2[sizes.pos += el.direction];

или отдельно считать счетчик позиций в функции для второго массива.

M-ka	06.05.2014 15:42

jsnb, если делать столько же элементов, как в первом массиве, то не стоит ли тогда рассмотреть вариант, что бы первый массив сделать из мелких массивов или заменить массив на обьект ?
[[0, 12], [1, 15], [2, 19],[4, ?], [8, ?]]
? -- число
px -- вынести в скрипт, где устанавливается значение, так...
ну или, что бы было понятно читать, что к чему относится...
[
{'size': 0,'fontSize':12},
{'size': 1,'fontSize':15},
{'size': 2,'fontSize':19},
{'size': 4,'fontSize':?},
{'size': 8,'fontSize':?}
]

Предложил бы еще вот так, тогда будет проще перебирать... вот только помню, были какие то траблы, когда числа в качестве ключей...
(поискал, надо ключи не в виде чисел представить, в противном случаи произойдет сортировка перед перебором)
{0: 12,
1: 15,
2: 19
4: ?,
8: ?}
превращается в
{"0px": 12,
"1px": 15,
"2px": 19
"4px": ?,
"8px": ?}
В результате, ключ уже сразу вписывать, а вот при использовании значения, тогда дописывать "px", хотя можно и не заморачиваться с этим и сразу тогда писать с "px"

cript

06.05.2014 15:55

Благодарю за ответы, очень помогли

cript

06.05.2014 19:35

А как вместо этого var el = document.all.elastic; подставить что-то на подобии $('div[id^="elastic"]'); .. ?

M-ka	06.05.2014 20:56

cript,
Ну если получить все id, которые начинаются на elastic, то $('[id^="elastic"]')
А в вашем варианте, получить все div с id, которые начинались на elastic.
Потому, смотря, что именно вы ходите получить... по коду выше, то там font в качестве тега, потому конструкция написанная вами не выдаст в результат...

актуально описание всех api http://api.jquery.com/
если надо раша вариант, то немного не угоняющийся за актуальностью, но все же http://jquery.page2page.ru/tags/ifr.html

найдите описание по работе с селекторами и смотрите)

cript

06.05.2014 21:18

Делаю так var el = $('[id^="elastic"]') , но не срабатывает, да и так тоже var el = $('font[id^="elastic"]')

M-ka	06.05.2014 21:50

cript,
а что не срабатывает?
var el = $('[id^="elastic"]'); //должен получить все, что найдет.... что у вас в el ?

cript

06.05.2014 22:09

<script src="//code.internetrange.com/jquery-1.8.3.js"></script>
<script>
var sizes = new Array("16px", "18px", "20px", "22px", "23px");
sizes.pos = 0;
var count = 0;
function rubberBand(value)
{
var el = $('[id^="elastic"]');
if (sizes.pos === 0) count++;
if (count > 2) {
  clearInterval(window.tm);
  count = 0;
  return;
}
if (null == el.direction)
el.direction = 1;
else if ((sizes.pos > sizes.length - 2) ||
(0 == sizes.pos))
el.direction *= -1;
el.style.fontSize = sizes[sizes.pos += el.direction];
}
window.tm = setInterval('rubberBand()', 100);
</script>
<font id="elastic">Text Текст</font>

рони	06.05.2014 22:42

cript,
jquery тут как .... рукав ...
скрипты не работают со сферическими конями ... поэтому ставим ниже элемента ... учим что такое готовность страницы.

<font id="elastic">Text Текст</font>
<script src="http://code.internetrange.com/jquery-1.8.3.js"></script>
<script>
var sizes = new Array("16px", "18px", "20px", "22px", "23px");
sizes.pos = 0;
var count = 0;
function rubberBand(value)
{
var el = $('[id^="elastic"]')[0];
if (sizes.pos === 0) count++;
if (count > 2) {
  clearInterval(window.tm);
  count = 0;
  return;
}
if (null == el.direction)
el.direction = 1;
else if ((sizes.pos > sizes.length - 2) ||
(0 == sizes.pos))
el.direction *= -1;
el.style.fontSize = sizes[sizes.pos += el.direction];
}
window.tm = setInterval('rubberBand()', 100);
</script>

cript

06.05.2014 23:35

рони,

<font id="elastic2">Text Текст</font>
<script src="http://code.internetrange.com/jquery-1.8.3.js"></script>
<script>
var sizes = new Array("16px", "18px", "20px", "22px", "23px");
sizes.pos = 0;
var count = 0;
function rubberBand(value)
{
var el = $('[id^="elastic"]');
if (sizes.pos === 0) count++;
if (count > 2) {
  clearInterval(window.tm);
  count = 0;
  return;
}
if (null == el.direction)
el.direction = 1;
else if ((sizes.pos > sizes.length - 2) ||
(0 == sizes.pos))
el.direction *= -1;
el.style.fontSize = sizes[sizes.pos += el.direction];
}
window.tm = setInterval('rubberBand()', 100);
</script>

Почему так не срабатывает..?

рони	07.05.2014 00:01

cript,
потому что el у вас обьект jquery у которого нет свойства style но есть ключик ноль там и лежит искомый элемент.
смотрите пост выше - строка 9

MallSerg

07.05.2014 00:11

Какой ужас :blink:

Vlasenko Fedor

07.05.2014 01:05

<div class="elastic">Текст</div>
<div class="elastic">Еще один текст</div>
<script>
  var k = 0;
  var npoz = next();
  var allel = document.querySelectorAll("div.elastic");
  var tm = setInterval(rubberBand, 100);

  function next() {
    var i = -1;
    return function () {
      i = i < 7 ? i + 1 : 0;
      return [16, 18, 20, 22, 23, 22, 20, 18][i];
    };
  }

  function rubberBand() {
    if (k == 16) clearInterval(tm);
    var fsize = npoz() + "px";
    for (var j = 0; j < allel.length; j += 1) {
      allel[j].style.fontSize = fsize;
    }
    k += 1;
  }
</script>

MallSerg

07.05.2014 02:10

имхо: через css проще правда в IE<10 не будет работать =)

<style type="text/css">
        b {font-size: 14pt;}
        .ani{-webkit-animation: gogo 1s;-webkit-animation-iteration-count: 2;
            animation: gogo 1s;animation-iteration-count: 2;}
        @-webkit-keyframes gogo{ 0% {font-size: 14pt;color: #23ff00;} 100% {font-size: 24pt;color: #b70000;}}
        @keyframes gogo{0% {font-size: 14pt;color: #23ff00;}100% {font-size: 24pt;color: #b70000;}}
    </style>
    <script>
        setTimeout("     $('[id^=\"elastic\"]').addClass(\"ani\")   ", 500);
    </script>
    <b id="elastic">Text Текст</b><br>
    <b id="no_elastic2">Text Текст</b><br>
    <b id="elastic2_asdf">Text Текст</b><br>
    <b id="no_elastic3">Text Текст</b><br>

Aetae

07.05.2014 05:35

MallSerg, зачем вообще Jquery?

<style type="text/css">
b { font-size: 14pt }
[id^="elastic"]{
    -webkit-animation: gogo 1s;
    -webkit-animation-iteration- count: 2;
    animation: gogo 1s;
    animation-iteration-count: 2;
}
@-webkit-keyframes gogo{
    0% { font-size: 14pt }
    50% { font-size: 24pt }
}
@keyframes gogo{
    0% { font-size: 14pt }
    50% { font-size: 24pt }
}
</style>
<b id="elastic">Text Текст</b><br>
<b id="no_elastic2">Text Текст</b><br>
<b id="elastic2_asdf">Text Текст</b><br>
<b id="no_elastic3">Text Текст</b><br>

P.S. Используйте [html run]...[/html] для наглядности.

cript

08.05.2014 19:23

Aetae,
Не плохой вариант, пытаюсь сделать так, но ничего не происходит, скажите в чем тут ошибка?

<script src="//code.internetrange.com/jquery-1.8.3.js"></script>
<style>
.elastic [id^="stat"]  {
-webkit-animation: elastic 1s;
-webkit-animation-iteration- count: 2;
animation: elastic 1s;
animation-iteration-count: 2;
}
@-webkit-keyframes elastic {
0% { 
font-size: 14pt; 
}
50% { 
font-size: 24pt; 
}
}
@keyframes elastic {
0% { 
font-size: 14pt; 
}
50% { 
font-size: 24pt; 
}
}
</style>
<script>
$(document).ready(function() {
$("#stat").addClass('elastic');
});
</script>
<div id="stat">Text</div>
<div id="stat2">Text2</div>

MallSerg

08.05.2014 20:49

Ошибка в том что в css нет класса который ты пытаешься добавить (.addClass('elastic');)

<script src="http://code.internetrange.com/jquery-1.8.3.js"></script>
<style type="text/css">
.elastic {
	-webkit-animation: elastic 5s;
	-webkit-animation-iteration- count: 4;
	animation: elastic 5s;
	animation-iteration-count: 2;}
@-webkit-keyframes elastic {0% {font-size: 14pt;}50%{font-size: 84pt;}}
@keyframes elastic {0% {font-size: 14pt;}50% {font-size: 84pt;}}
</style>
<script>
$(document).ready(function() {
$("#stat").addClass('elastic');});
</script>
<div id="stat">Text</div>
<div id="stat2">Text2</div>

Часовой пояс GMT +3, время: 05:26.