анимационный текст - JavaScript, Ajax

meteora320 · 20.11.2018, 17:08

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

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;
}
});

Naive · 20.11.2018, 17:39

нифига не выглядит как валидный код

Black Fregat · 20.11.2018, 18:40

Цитата:

Сообщение от Naive

нифига не выглядит как валидный код

Так очевидно же! Здесь читать, здесь не читать

3 файла - 3 строки после числа 3, потом 11 строк после числа 11, потом 26 строк после числа 26

Цитата:

Сообщение от meteora320

чтобы он менялся на второй текст третий четвертый и так далее

А вот что именно нужно сделать, так и не понял..

meteora320 · 20.11.2018, 19:17

Цитата:

Сообщение от 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

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

meteora320 · 20.11.2018, 19:22

http://tobiasahlin.com/moving-letters/#12 вот ссылка

Serge_Bliznykov · 20.11.2018, 20:50

ну так просто измените текст с классом ml12 на нужный и всё. больше ничего делать не надо.

Serge_Bliznykov · 20.11.2018, 21:19

посмотрите этот 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>

meteora320 · 20.11.2018, 22:09

Большое спасибо)помогли

20.11.2018, 17:39	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	нифига не выглядит как валидный код Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Флеш Текст +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

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; } });

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

20.11.2018, 19:22	#6
meteora320 Новичок Джуниор Регистрация: 20.11.2018 Сообщений: 5	http://tobiasahlin.com/moving-letters/#12 вот ссылка

20.11.2018, 20:50	#7
Serge_Bliznykov Старожил Регистрация: 09.01.2008 Сообщений: 26,229	ну так просто измените текст с классом ml12 на нужный и всё. больше ничего делать не надо.

20.11.2018, 22:09	#9
meteora320 Новичок Джуниор Регистрация: 20.11.2018 Сообщений: 5	Большое спасибо)помогли