Описание

Установка

Параметры

Конфигуратор

Анимированный шрифт ЕДСИС

Описание

EDSIS font 1.0

Дизайнерский, анимированный шрифт специально разработанный для проекта edsis.ru (едсис.рф), реализованный на чистом JavaScript - технология Canvas.
Данная версия содержит все кириллические, заглавные буквы
от А до Я и пробел.
Кроссбраузерность кроме Internet Explorer, где необходимо подключать полифил Bluebird (см. Установка и настройка).

Простая установка и гибкая настройка:

• Настройка цветов;
• Настройка толщины линий;
• Добавление и настройка тени;
• Два режима анимации: параллельный и последовательный;
• Настройка скорости анимации;
• Автомасштабирование по ширине блока;
• Активация режима «сетка» для удобства настройки.

Примеры

1. Авторский логотип «СССР 2.0»

2. Цветовое решение с тенью

Установка и настройка

1. Скачиваем файл edsis-font-1.0.min.js (11,1 КБ).

2. Поключаем данный файл на странице между тегами <head></head>:

<head>
    <script type="text/javascript" src="edsis-font-1.0.js"></script>
</head>

Внимание! Для корректной работы в браузерах Internet Explorer, необходимо также подключить полифил Bluebird:

<head>
    <script type="text/javascript" src="edsis-font-1.0.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>
</head>

3. Добавляем блок на странице для вставки холста с селектором по умолчанию "edsis-font":

<div class="edsis-font"></div>

4. Добавляем скрипт на странице для активации анимации перед закрывающимся тегом </body>:

а) на чистом JS:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        EdsisFont({});
    });
</script>

б) на jQuery:

<script>
    $(function(){
        EdsisFont({});
    });
</script>

5. Производим необходимую настройку скрипта, добавляя соответствующие параметры.

Здесь метод EdsisFont(params, callback) принимает два основных параметра:
• обяазательный - объект params (см. таблицу с параметрами), по умолчанию передаётся пустой объект {};
• не обяазательный - функция callback.

Также для удобства настройки вы можете воспользоваться конфигуратором.

Пример 1 - уст. текст "Образец" и цвет для всех элементов зелёный:

EdsisFont({
    text: 'Образец',
    color: 'green'
});

Пример 2 - уст. толщину линий в 20px и добавляем тень:

EdsisFont({
    text: 'Образец',
    color: 'green',
    line: 20,
    shadow: {
        offsetX: -35,
        offsetY: -35,
        blur: 5,
        color: 'rgba(0, 0, 0, .4)'
    }
});

Пример 3 - добавляем функцию обратного вызова по завершении анимации:

EdsisFont({
    text: 'Образец',
    color: 'green',
    line: 20,
    shadow: {
        offsetX: -35,
        offsetY: -35,
        blur: 5,
        color: 'rgba(0, 0, 0, .4)'
    }
}, function() {
    alert('Готово!');
});

Параметры

Параметр	Тип	Описание	По умолчанию	Примечание
background	string	Цвет фона холста.	Прозрачный	В любом веб-формате: text, HEX, RGB, RGBA.
color	string or array	Цвет элементов (букв, цифр и символов).	Чёрный	Если строка, то применяеться ко всем элментам. Если массив с цветами, то попорядку каждый цвет для каждого элемента.
grid	string	Сетка за тексом, где её активация через указание цвета линий.	Отключена	В любом веб-формате: text, HEX, RGB, RGBA.
line	integer	Толщина линий в пикселях.	10	Не менее 2px.
margin	integer	Отступы со всех сторон от края холста до элементов в пикселях.	= line
mode	integer	Режим анимации: 0 - параллельный; 1 - последовательный.	0
scale	integer	Режим масштабирования элементов и холста: 0 - обрезание; 1 - автоуменьшение по ширине блока, но до толщины линий 2px (остальное будет обрезано).	0
shadow	object	Настройки тени. Для отображения необходим отступ (параметр margin). Автоизменяется в пределах внешнего отступа, а также не более толщины линий (параметр line).	Отключена	Содержит 4-е параметра: offsetX, offsetY, blur и color.
offsetX	integer	Смещение по оси X в пикселях. Отрицательное или положительное значение.	= line / 2
offsetY	integer	Смещение по оси Y в пикселях. Отрицательное или положительное значение.	= line / 2
blur	integer	Размытие тени в пикселях. Только положительное значение.	0	Автоуменьшает offsetX и offsetY, если offsetX + blur > margin или offsetY + blur > margin
color	string	Цвет тени.	'rgba(0, 0, 0, .4)'	В любом веб-формате: text, HEX, RGB, RGBA.
speed	integer	Коэффициент замедления ("Скорость") анимации одного элемента.	100
text	string	Текст для анимации.	'ЕДСИС'	Регистронезависимый.
wrap	string	Селектор html-блока для вставки холста.	'.edsis-font'

Конфигуратор

Здесь, в on-line режиме вы можете произвести необходимую настройку шрифта (beta).

Основные

Текст:

Цвет букв:

Цвет фона холста:

Толщина линий:

Отступы:

Скорость анимации:

Тень

Активация тени: Нет Да

Смещение по оси X:

Смещение по оси Y:

Размытие тени:

Цвет тени:

Дополнительные

Режим анимации:

Параллельный Последовательный

Режим масштабирования:

Обрезание Автоуменьшение

Активация сетки: Нет Да

Цвет сетки:

Результат:

Код для вставки: