Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 20.11.2018, 17:08   #1
meteora320
Новичок
Джуниор
 
Регистрация: 20.11.2018
Сообщений: 5
По умолчанию анимационный текст

Добрых вечеров!подскажите пожалуйста) есть анимационный текст, повторяется, что нужно добавить, чтобы он менялся на второй текст третий четвертый и так далее.

HTML
HTML5Выделить код
1
2
3
<h1 class="ml12">A new production</h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
CSS
CSSВыделить код
1
2
3
4
5
6
7
8
9
10
11
.ml12 {
font-weight: 200;
font-size: 1.8em;
text-transform: uppercase;
letter-spacing: 0.5em;
}

.ml12 .letter {
display: inline-block;
line-height: 1em;
}
JAVASCRIPT
JavascriptВыделить код
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// Wrap every letter in a span
$('.ml12').each(function(){
$(this).html($(this).text().replace (/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
.add({
targets: '.ml12 .letter',
translateX: [40,0],
translateZ: 0,
opacity: [0,1],
easing: "easeOutExpo",
duration: 1200,
delay: function(el, i) {
return 500 + 30 * i;
}
}).add({
targets: '.ml12 .letter',
translateX: [0,-30],
opacity: [1,0],
easing: "easeInExpo",
duration: 1100,
delay: function(el, i) {
return 100 + 30 * i;
}
});
meteora320 вне форума Ответить с цитированием
Старый 20.11.2018, 17:39   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

нифига не выглядит как валидный код
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 20.11.2018, 18:40   #3
Black Fregat
Программист
Участник клуба
 
Аватар для Black Fregat
 
Регистрация: 23.06.2009
Сообщений: 1,772
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
нифига не выглядит как валидный код
Так очевидно же! Здесь читать, здесь не читать
3 файла - 3 строки после числа 3, потом 11 строк после числа 11, потом 26 строк после числа 26

Цитата:
Сообщение от meteora320 Посмотреть сообщение
чтобы он менялся на второй текст третий четвертый и так далее
А вот что именно нужно сделать, так и не понял..
Black Fregat вне форума Ответить с цитированием
Старый 20.11.2018, 19:17   #4
meteora320
Новичок
Джуниор
 
Регистрация: 20.11.2018
Сообщений: 5
По умолчанию

Цитата:
Сообщение от Black Fregat Посмотреть сообщение
Так очевидно же! Здесь читать, здесь не читать
3 файла - 3 строки после числа 3, потом 11 строк после числа 11, потом 26 строк после числа 26


А вот что именно нужно сделать, так и не понял..
Извеняюсь)) нужно чтобы допустим текст 100 менялся на 200 300 и так далее


HTML
<h1 class="ml12">1</h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
CSS
.ml12 {
font-weight: 200;
font-size: 1.8em;
text-transform: uppercase;
letter-spacing: 0.5em;
}

.ml12 .letter {
display: inline-block;
line-height: 1em;
}
JAVASCRIPT
// Wrap every letter in a span
$('.ml12').each(function(){
$(this).html($(this).text().replace (/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
.add({
targets: '.ml12 .letter',
translateX: [40,0],
translateZ: 0,
opacity: [0,1],
easing: "easeOutExpo",
duration: 1200,
delay: function(el, i) {
return 500 + 30 * i;
}
}).add({
targets: '.ml12 .letter',
translateX: [0,-30],
opacity: [1,0],
easing: "easeInExpo",
duration: 1100,
delay: function(el, i) {
return 100 + 30 * i;
}
});
meteora320 вне форума Ответить с цитированием
Старый 20.11.2018, 19:19   #5
meteora320
Новичок
Джуниор
 
Регистрация: 20.11.2018
Сообщений: 5
По умолчанию

он на одном предложении зациклен, поэтому не пойму что нужно еще добавить, чтобы текст менялся на другой
meteora320 вне форума Ответить с цитированием
Старый 20.11.2018, 19:22   #6
meteora320
Новичок
Джуниор
 
Регистрация: 20.11.2018
Сообщений: 5
По умолчанию

http://tobiasahlin.com/moving-letters/#12 вот ссылка
meteora320 вне форума Ответить с цитированием
Старый 20.11.2018, 20:50   #7
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

ну так просто измените текст с классом ml12 на нужный и всё. больше ничего делать не надо.
Serge_Bliznykov вне форума Ответить с цитированием
Старый 20.11.2018, 21:19   #8
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

посмотрите этот HTML код:
Код:
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">

<style>
.ml12 {
 font-weight: 200;
 font-size: 1.8em;
 text-transform: uppercase;
 letter-spacing: 0.5em;
}

.ml12 .letter {
 display: inline-block;
 line-height: 1em;
}
</style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
</head>
<body>
<h1 class="ml12">1</h1>

<script>
var ml12values = ['100','200','300','This Last Text'];
var ml12index=0;

function SetNewText(){
	 $('.ml12').each(function(){
		// Wrap every letter in a span
		$(this).html(ml12values[ml12index].replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
		//$(this).html(s.replace(/(.)/,"<span class='letter'>$1</span>"));
		ml12index = ml12index==(ml12values.length-1)?0:ml12index+1;
	});

 anime.timeline({loop: true})
 .add({
	 targets: '.ml12 .letter',
	 translateX: [40,0],
	 translateZ: 0,
	 opacity: [0,1],
	 easing: "easeOutExpo",
	 duration: 1200,
	 delay: function(el, i) {
		 return 500 + 30 * i;
 }
 }).add({
	 targets: '.ml12 .letter',
	 translateX: [0,-30],
	 opacity: [1,0],
	 easing: "easeInExpo",
	 duration: 1100,
	 delay: function(el, i) {
	 return 100 + 30 * i;
 }
 });

}

SetNewText();
setInterval(function(){
		//$(this).html($(this).text().replace (/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
		SetNewText();
	 },6000);


</script>
Serge_Bliznykov вне форума Ответить с цитированием
Старый 20.11.2018, 22:09   #9
meteora320
Новичок
Джуниор
 
Регистрация: 20.11.2018
Сообщений: 5
По умолчанию

Большое спасибо)помогли
meteora320 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Флеш Текст +1 - Flash дна кнопка и один текст(Label), как сделать чтоб при нажатии на кнопку текст Label был Label.text + 1 quarty Общие вопросы Web 6 24.12.2013 15:13
анимационный мультфильм в паскале kostya-kot Паскаль, Turbo Pascal, PascalABC.NET 3 31.03.2012 14:13
Сохранить в текстовый файл текст из Memo и текст из нескольких Edit misher Общие вопросы Delphi 5 02.01.2011 15:37
Анимационный Кран Sasuke-cun Общие вопросы Delphi 3 02.12.2009 16:52
Анимационный курсор Bat{CMD}_Men Мультимедиа в Delphi 1 01.09.2009 09:21