Пишем письмо в старинном стиле
Сделаем анимированное старинное письмо. Перо скользит по бумаге, оставляя на ней бессмертные строки. Когда чернила заканчиваются, перо ныряет в чернильницу. иногда случаются ошибки, перо само исправит их.
Разметка
Для письма делаем пустой контейнер, в который будет помещаться текст, и два изображения (для чернильницы и процесса обмакивания пера).
<div id="letter"></div> <img id="inkwell1" src="/inkwell1.gif" alt="inkwell1" /> <img id="inkwell2" src="/inkwell2.gif" alt="inkwell2" /> <div id="letter_src"> Цыганы шумною толпой<br> По биссарбии|||||||||Бессарабии кочуют.<br> Они сегодня над рекой<br> В шатрах изодранных ночуют.<br><br> Как вольность, весел их ночлег<br> И мирный сон под небесами;<br> Между кал|||колесами телег,<br> Полузавешанных коврами,<br><br> Горит огонь; семья кругом<br> Готовит усин||||ужин; в чистом поле<br> Пасутся кони; за шатром<br> Ручной медведь лежит на воле.<br><br> Всё живо посреди степей:<br> Заботы мирные семей,<br> Готовых с утром в путь недальний,<br> И песни жен, и хрик||||крик детей,<br><br> И звон походной наковальни.<br> Но вот на табор кочевой<br> Нисходит зонное||||||сонное молчанье,<br> И слышно в тишине степной<br><br> Лишь лай собак да каней|||||коней ржанье.<br> Огни везде погашены,<br> Спокойно всё, луна сияет<br> Одна с небесной вышины<br> И тихий табор озаряет.<br> </div>
CSS
Зададим стили для нашего письма. Источник текста по умолчанию скрыт.
body { background: url('bg.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #inkwell1 { bottom: 100px; left: 140px; position: fixed; } #inkwell2 { bottom: 100px; left: 140px; position: fixed; visibility: hidden; } #letter { font-family: Comic Sans MS; font-size: 18px; font-weight: bold; margin: 50px auto; position: relative; width: 75%; } #letter_src { display: none; }
JavaScript
Основная идея - выводить символы один за другим. В зависимости от текущего символа можно устанавливать различные задержки и имитировать ошибки письма. Для отображения расхода чернил используется символ пробела, поэтому каждое слово имеет свой цвет (градацию серого). Как только цвет станет совсем белым, запускаем 'обмакивание пера в чернильницу'.
window.onload = function(){ // Публичные переменные var vLetter = document.getElementById('letter'); var iSpeedInk = 5; // Остальные перменные var sText = document.getElementById('letter_src').innerHTML; var iCurChar = 0; var sChars = '<span>'; var iCurInk = 0; var sCurCaret = ''; var sCaret = " <img src='pen.gif' style='position:absolute' />"; var doStep = function () { // Текуший символ var sChar = sText.charAt(iCurChar); // Задержка символа по умолчанию var iDelay = 32; if (sChar == '') { sCurCaret = ''; } else if (sChar == '|') { // Используем символ | для имитации 'ошибки' sChar = ''; sChars = sChars.substring(0, sChars.length-1); iDelay = 64; } else if (sChar == '<') { // Передаем теги var iPos = sText.indexOf('>', iCurChar); sChar = sText.substring(iCurChar, iPos + 1); iCurChar = iPos; } else if (sChar == '&') { // Передаем атрибуты html var iPos = sText.indexOf(';', iCurChar); sChar = sText.substring(iCurChar, iPos + 1); iCurChar = iPos; } else if (sChar == '.') { // Пользовательская задержка для символа . iDelay = 300; } else if (sChar == ',') { // Пользовательская задержка для символа , iDelay = 100; } else if (sChar == ' ') { // Пользовательская задержка для пробела iDelay = 32; } else if (iCurChar > 5) { sCurCaret = sCaret; } // Расходование чернил if (sChar == ' ') { iCurInk += iSpeedInk; sChar = '</span><span style="color:RGB(' + (iCurInk) + ',' + (iCurInk) + ',' + (iCurInk) + ')">' + sChar; } if (document.getElementById('inkwell2').style.visibility == 'visible') { sCurCaret = sCaret; document.getElementById('inkwell2').style.visibility = 'hidden'; sChar = '</span><span style="color:RGB(0,0,0)">' + sChar; } // Обновление чернил if (iCurInk > 160) { iCurInk = 0; document.getElementById('inkwell2').style.visibility = 'visible'; iDelay = 1000; sCurCaret = ''; } // Добавляем текущий символ в строку sChars += sChar; // Скрываем каретку после символа if (iCurChar == sText.length - 1) sCurCaret = ''; // Обновляем письмо с новыми символами vLetter.innerHTML = sChars + sCurCaret; // Переходим к следующему символу iCurChar++; // Следующий шаг if (iCurChar < sText.length) { setTimeout(doStep, 20 + iDelay); } } doStep(); };
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/LWUT0ZjaspY/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Есть три способа отвечать на вопросы: сказать необходимое, отвечать с приветливостью и – наговорить лишнего Плутарх - (ок. 46 — ок.120) - древнегреческий писатель, историк |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.