Javascript.RU

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

Еффект перебора букв для текста
Ку) подскажите, как реализовать такой еффект перебора текста пунктов меню при наведении, как на этом сайте https://fabianirsara.com/ ?
Ответить с цитированием
  #2 (permalink)  
Старый 17.01.2019, 09:23
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Perepelenok
как реализовать такой эффект перебора текста пунктов меню при наведении, как на этом сайте https://fabianirsara.com/ ?
При взаимодействии с кнопкой запускать функцию, которая берёт исходное слово и меняет местами его случайно взятые буквы несколько раз. После каждого изменения слова надо показывать в кнопке изменённое слово. Получается анимация! Только затем нужно сразу проиграть её задом наперёд, чтобы всё вернулось на место!

Пример...
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style>
	
		html {
			background: #1e1e20;
		}
		
		.roll-text {
			all: unset;
			color: white;
			font: bold 250% monospace;
			border-bottom: medium solid;
			padding: .25em;
			margin: .25em;
			transition: 500ms;
		}
		
		.roll-text:hover { color: bisque; }
		.roll-text:focus { color: gold; }
		
	</style>
</head>

<body>
<a href="#" class="roll-text">Hello</a>
<button class="roll-text">Codepen</button>
<button class="roll-text">Rolling&nbsp;Text</button>
<script>

{
	const isRolling = Symbol("rolling text");

	function getPositions(length) {
		return Array.from(new Array(length), () => [
			(length * Math.random() | 0) % length,
			(length * Math.random() | 0) % length,
		]);
	}

	async function rollText(element) {
		if(element[isRolling]) return;

		element[isRolling] = true;

		const word = [...element.textContent];
		const ps = getPositions(word.length);
		const computedWords = [word.join("")];

		for(const [p1, p2] of ps) {
			[word[p1], word[p2]] = [word[p2], word[p1]];
			computedWords.push(element.textContent = word.join(""));
			await delay(30);
		}

		while(computedWords.length) {
			const word = computedWords.pop();
			element.textContent = word;
			await delay(30);
		}

		element[isRolling] = false;
	}

	function delay(ms) {
		return new Promise(resolve => setTimeout(resolve, ms));
	}

	function rollHandler({ target }) {
		if(target.matches(".roll-text"))
			rollText(target);
	}

	addEventListener("pointerover", rollHandler);
	addEventListener("pointerout", rollHandler);
}

</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 17.01.2019, 22:56
Интересующийся
Отправить личное сообщение для Perepelenok Посмотреть профиль Найти все сообщения от Perepelenok
 
Регистрация: 16.07.2016
Сообщений: 26

Круто!А как можно вызвать функцию rollText(); при загрузки страницы?
И еще - при "ролле" по возвращению к исходному тексту - удаляются теги выделения в тексте, такие как <strong> и тп.Как исправить?

Последний раз редактировалось Perepelenok, 17.01.2019 в 23:05.
Ответить с цитированием
  #4 (permalink)  
Старый 17.01.2019, 23:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

Сообщение от Malleys
(length * Math.random() | 0) % length,
Цитата:
Метод Math.random() возвращает псевдослучайное число с плавающей запятой из диапазона [0, 1), то есть, от 0 (включительно) до 1 (но не включая 1)
может убрать % length?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывод текста для определенного браузера. enjoyman Общие вопросы Javascript 1 03.03.2017 15:53
jQuery поменять CSS цвет для текста при наведении мышью (.text:hover) JooZ jQuery 16 15.11.2010 19:56
Проверка текста на наличие в нем букв zoibana Общие вопросы Javascript 1 03.02.2009 15:48
смайлы для чата, замена текста brain Общие вопросы Javascript 9 28.11.2008 21:35
Форма для ввода текста с расширенными функциями 0x22b Элементы интерфейса 0 01.09.2008 10:38