Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.05.2014, 14:08
Профессор
Отправить личное сообщение для cript Посмотреть профиль Найти все сообщения от cript
 
Регистрация: 03.02.2014
Сообщений: 238

Текстовый эффект
Приветствую!
Недавно нашел такой скрипт, который создает эффект растягивания текста
<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>

Подскажите как сделать так, чтобы, например после второго сжатия эффект прекращался?
Ответить с цитированием
  #2 (permalink)  
Старый 06.05.2014, 14:36
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 15.03.2014
Сообщений: 561

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 06.05.2014, 14:53
Профессор
Отправить личное сообщение для cript Посмотреть профиль Найти все сообщения от cript
 
Регистрация: 03.02.2014
Сообщений: 238

jsnb,
Премного благодарен.
Случайно не знаете как сделать так, чтобы текст помимо растягивания (letterSpacing) уменьшался и увеличивался в размере?
Ответить с цитированием
  #4 (permalink)  
Старый 06.05.2014, 15:08
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 15.03.2014
Сообщений: 561

Сообщение от cript Посмотреть сообщение
Случайно не знаете как сделать так, чтобы текст помимо растягивания (letterSpacing) уменьшался и увеличивался в размере?
Менять fontSize.
Ответить с цитированием
  #5 (permalink)  
Старый 06.05.2014, 15:11
Профессор
Отправить личное сообщение для cript Посмотреть профиль Найти все сообщения от cript
 
Регистрация: 03.02.2014
Сообщений: 238

jsnb,
Спасибо, сработало!
Ответить с цитированием
  #6 (permalink)  
Старый 06.05.2014, 15:14
Профессор
Отправить личное сообщение для cript Посмотреть профиль Найти все сообщения от cript
 
Регистрация: 03.02.2014
Сообщений: 238

Только вот еще не пойму, если добавить второй массив для fontSize, как ту быть?
var sizes2 = new Array("12px", "15px", "19px");
....
el.style.fontSize = sizes2[sizes2.pos += el.direction]; // не срабатывает
Ответить с цитированием
  #7 (permalink)  
Старый 06.05.2014, 15:25
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 15.03.2014
Сообщений: 561

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

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

Последний раз редактировалось jsnb, 06.05.2014 в 15:29.
Ответить с цитированием
  #8 (permalink)  
Старый 06.05.2014, 15:42
Аспирант
Отправить личное сообщение для M-ka Посмотреть профиль Найти все сообщения от M-ka
 
Регистрация: 25.04.2014
Сообщений: 47

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"

Последний раз редактировалось M-ka, 06.05.2014 в 16:00.
Ответить с цитированием
  #9 (permalink)  
Старый 06.05.2014, 15:55
Профессор
Отправить личное сообщение для cript Посмотреть профиль Найти все сообщения от cript
 
Регистрация: 03.02.2014
Сообщений: 238

Благодарю за ответы, очень помогли
Ответить с цитированием
  #10 (permalink)  
Старый 06.05.2014, 19:35
Профессор
Отправить личное сообщение для cript Посмотреть профиль Найти все сообщения от cript
 
Регистрация: 03.02.2014
Сообщений: 238

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите сделать эффект смены страниц Eugi Элементы интерфейса 6 16.07.2013 17:06
Эффект при прокрутке страницы Baskerville42 jQuery 1 17.05.2013 02:29
Онлайновый текстовый редактор html/js. Нужны советы. elf2002 Javascript под браузер 9 03.01.2012 03:48
Интересный эффект InviS jQuery 4 25.08.2010 13:49
эффект ленты HelpeR Общие вопросы Javascript 8 08.01.2009 11:41