оформление цифровых пространств
разработка бренд-продуктов
создание фирменного стиля
design
дизайн
Работа главным дизайнером в московском издательстве
«Академический Проект»
[с сентября 2022 по март 2023]
В ОБЯЗАННОСТИ ВХОДИЛО:
✦ продолжение существующих книжных серий
✦ создание и дизайн нового серийного оформления
✦ редизайн устаревших изданий
✦ составление ТЗ для сторонних дизайнеров
✦ художественное оформление ярморочных стендов
✦ SMM-менеджмент соц. сети издательства [группа «ВКонтакте»]
✦ ответы на комментарии и сообщения в группе
✦ вёрстка и копирайтинг тематических статей
✦ дизайн рекламных постов и праздничных рассылок для клиентов
✦ продолжение существующих книжных серий
✦ создание и дизайн нового серийного оформления
✦ редизайн устаревших изданий
✦ составление ТЗ для сторонних дизайнеров
✦ художественное оформление ярморочных стендов
✦ SMM-менеджмент соц. сети издательства [группа «ВКонтакте»]
✦ ответы на комментарии и сообщения в группе
✦ вёрстка и копирайтинг тематических статей
✦ дизайн рекламных постов и праздничных рассылок для клиентов
#иллюстрация
#веб-дизайн
#брендинг
#фирменный_стиль
#копирайтинг
#вёрстка
Ps
Ai
Id
месячная ставка:
70 000
₽
SMM-МЕНЕДЖМЕНТ
ХУДОЖЕСТВЕННОЕ ОФОРМЛЕНИЕ
Вёрстка и копирайтинг статей
ПЕРЕЧЕНЬ ОБЯЗАННОСТЕЙ:
✦ контент-план на месяц.
✦ составление тематических постов в сопровождение к рекламе книг и/или статей, поиск подходящих юбилейных дат.
✦ составление, редактирование, подбор и вёрстка статей.
✦ поиск, обработка и коллажирование изображений к тексту.
✦ контент-план на месяц.
✦ составление тематических постов в сопровождение к рекламе книг и/или статей, поиск подходящих юбилейных дат.
✦ составление, редактирование, подбор и вёрстка статей.
✦ поиск, обработка и коллажирование изображений к тексту.
ПЕРЕЧЕНЬ ОБЯЗАННОСТЕЙ:
✦ контент-план на месяц.
✦ составление тематических постов в сопровождение
к рекламе книг и/или статей,
поиск подходящих юбилейных дат.
✦ составление, редактирование, подбор и вёрстка статей.
✦ поиск, обработка и коллажи изображений
к тексту.
✦ контент-план на месяц.
✦ составление тематических постов в сопровождение
к рекламе книг и/или статей,
поиск подходящих юбилейных дат.
✦ составление, редактирование, подбор и вёрстка статей.
✦ поиск, обработка и коллажи изображений
к тексту.
ПРИМЕР СТАТЕЙ:
✦ 300 ЛЕТ: Екатеринбург и Пермь
краткая историческая сводка о В.Н. Татищеве, основателе Екатеринбурга
и Перьми. Сопутствующая реклама книг Татищева была приурочена к юбилею основания этих городов.
✦ ПСИХОЛОГИЯ ВОСПИТАНИЯ
статья с подборкой нескольких книг по теме воспитания детей
и встроенной рекламой книг издательства по этой теме.
✦ 300 ЛЕТ: Екатеринбург и Пермь
краткая историческая сводка о В.Н. Татищеве, основателе Екатеринбурга
и Перьми. Сопутствующая реклама книг Татищева была приурочена к юбилею основания этих городов.
✦ ПСИХОЛОГИЯ ВОСПИТАНИЯ
статья с подборкой нескольких книг по теме воспитания детей
и встроенной рекламой книг издательства по этой теме.
ПРИМЕР СТАТЕЙ:
✦ 300 ЛЕТ: Екатеринбург и Пермь
краткая историческая сводка о В.Н. Татищеве, основателе Екатеринбурга и Перьми. Сопутствующая реклама книг Тати-щева была приурочена к юбилею основания этих городов.
✦ ПСИХОЛОГИЯ ВОСПИТАНИЯ
статья с подборкой нескольких книг по теме воспитания детей и встроенной рекламой книг издательства
по этой теме.
✦ 300 ЛЕТ: Екатеринбург и Пермь
краткая историческая сводка о В.Н. Татищеве, основателе Екатеринбурга и Перьми. Сопутствующая реклама книг Тати-щева была приурочена к юбилею основания этих городов.
✦ ПСИХОЛОГИЯ ВОСПИТАНИЯ
статья с подборкой нескольких книг по теме воспитания детей и встроенной рекламой книг издательства
по этой теме.
ПРИМЕР СТАТЕЙ:
✦ 300 ЛЕТ: Екатеринбург и Пермь
краткая историческая сводка о В.Н. Татищеве, основателе Екатеринбурга и Перьми. Сопутствующая реклама книг Татищева была приурочена к юбилею основания этих городов.
✦ ПСИХОЛОГИЯ ВОСПИТАНИЯ
статья с подборкой нескольких книг по теме воспитания детей и встроенной рекламой книг издательства по этой теме.
✦ 300 ЛЕТ: Екатеринбург и Пермь
краткая историческая сводка о В.Н. Татищеве, основателе Екатеринбурга и Перьми. Сопутствующая реклама книг Татищева была приурочена к юбилею основания этих городов.
✦ ПСИХОЛОГИЯ ВОСПИТАНИЯ
статья с подборкой нескольких книг по теме воспитания детей и встроенной рекламой книг издательства по этой теме.
#иллюстрация
#веб-дизайн
#брендинг
#фирменный_стиль
#копирайтинг
#вёрстка
#SMM-менеджмент
Ps
Ai
Id
#иллюстрация
#веб-дизайн
#брендинг
#фирменный_стиль
#копирайтинг
#вёрстка
#SMM-менеджмент
Ps
Ai
Id
примерная стоимость:
3 000
₽
brending
фирменный стиль
бои едой «На вынос»
разработка фирменного стиля вымышленной студии по организации боёв едой
Проект с первого курса на Факультете Коммуникаций, Медиа и Дизайна в НИУ ВШЭ.
Концепция студии такова, что здесь каждый может выпустить пар и весело провести время с друзьями, партнёрами и детьми вместо типичных словесных склок. Такой метод досуга должен помочь избежать конфликтов и ссор в любых отношениях.
Концепция студии такова, что здесь каждый может выпустить пар и весело провести время с друзьями, партнёрами и детьми вместо типичных словесных склок. Такой метод досуга должен помочь избежать конфликтов и ссор в любых отношениях.
Проект с первого курса на Факультете Коммуникаций, Медиа и Дизайна в НИУ ВШЭ.
Концепция студии такова, что здесь каждый может выпустить пар и весело провести время с друзьями, партнёрами и детьми вместо типичных словесных склок. Такой метод досуга должен помочь избежать конфликтов и ссор в любых отношениях.
Концепция студии такова, что здесь каждый может выпустить пар и весело провести время с друзьями, партнёрами и детьми вместо типичных словесных склок. Такой метод досуга должен помочь избежать конфликтов и ссор в любых отношениях.
Логотипом стал лобстер, отсылающий к еде, а на его клешнях боксёрские перчатки. В названии также присутствует связь этих двух направлений организации. Можно прочитать «навы́нос» или же «на в нос!».
Логотипом стал лобстер, отсылающий к еде, а на его клешнях боксёрские перчатки. В названии также присутствует связь этих двух направлений организации.
Можно прочитать «навы́нос»или же «на в нос!».
Можно прочитать «навы́нос»или же «на в нос!».
Логотипом стал лобстер, отсылающий к еде, а на его клешнях боксёрские перчатки. В названии также присут-ствует связь этих двух направлений организации. Можно прочитать «навы́нос» или же «на в нос!».
Логотипом стал лобстер, отсылающий к еде, а на его клешнях боксёрские перчатки. В названии также присутствует связь этих двух направлений организации. Можно прочитать «навы́нос» или же «на в нос!».
#анимация
#иллюстрация
#монтаж
#веб-дизайн
#брендинг
#фирменный_стиль
#вёрстка
#SMM-менеджмент
Ps
Ai
Ae
примерная стоимость:
50 000
₽
серия тематического мерча dsh в комикс-стилистике
разработка личного бренда
Концепция данных продуктов подразумевает принты с текстовой имитацией звуков, которые издают эти предметы.
Концепция данных продуктов подразумевает принты с текстовой имитацией звуков, которые издают эти предметы.
шоппер-трансформер
благодаря лямкам, проходящим через верхние края шоппера, его можно носить как сумку на плече и как рюкзак на спине
пенал
звук открытия молнии
блокнот
звук захлопывания блокнота
форзац блокнота
хруст при открытии новой книги
#брендинг
#фирменный_стиль
#иллюстрация
Ps
примерная стоимость:
15 000
₽
web-
design
веб-дизайн
Дизайн карточек товаров
на маркет-плейсы
ТЕХНИЧЕСКОЕ ЗАДАНИЕ:
создание карточки для маркет-плейсов (в случае с электродрелью — дополнительно инфографика).
ИСХОДНЫЕ МАТЕРИАЛЫ:
✦ необработанные фотографии продукта.
✦ описание, характеристики.
создание карточки для маркет-плейсов (в случае с электродрелью — дополнительно инфографика).
ИСХОДНЫЕ МАТЕРИАЛЫ:
✦ необработанные фотографии продукта.
✦ описание, характеристики.
#иллюстрация
#веб-дизайн
#брендинг
#фирменный_стиль
#копирайтинг
#вёрстка
#SMM-менеджмент
Ps
Ai
Id
примерная стоимость:
1 000
₽
от
для сайта-конструктора
Разработка логотипа
ТЕХНИЧЕСКОЕ ЗАДАНИЕ:
✦ создании лаконичного и современного логотипа.
✦ развёрнутая версия с названием [appdb].
✦ сокращённая версия — иконка.
✦ цветовая палитра, которая могла бы стать основой фирменного стиля.
✦ зацикленная анимация перехода из полного варианта в иконку.
✦ 3 анимации сокращённого варианта для взаимодействия с иконкой на сайте.
КОНЦЕПЦИЯ:
Поскольку сайт связан с шаблонами для программирования, в качестве символов были взяты интерфейс кодинг-программ и принцип конструкторов (LEGO, пазлы
и проч.)
ПРОЦЕСС:
В стоимость разработки лого входит 5 эскизов и внесение до 3-х правок
в готовый вариант.
✦ создании лаконичного и современного логотипа.
✦ развёрнутая версия с названием [appdb].
✦ сокращённая версия — иконка.
✦ цветовая палитра, которая могла бы стать основой фирменного стиля.
✦ зацикленная анимация перехода из полного варианта в иконку.
✦ 3 анимации сокращённого варианта для взаимодействия с иконкой на сайте.
КОНЦЕПЦИЯ:
Поскольку сайт связан с шаблонами для программирования, в качестве символов были взяты интерфейс кодинг-программ и принцип конструкторов (LEGO, пазлы
и проч.)
ПРОЦЕСС:
В стоимость разработки лого входит 5 эскизов и внесение до 3-х правок
в готовый вариант.
ТЕХНИЧЕСКОЕ ЗАДАНИЕ:
✦ создании лаконичного и современного логотипа.
✦ развёрнутая версия с названием [appdb].
✦ сокращённая версия — иконка.
✦ цветовая палитра, которая могла бы стать основой фирменного стиля.
✦ зацикленная анимация перехода из полного варианта в иконку.
✦ 3 анимации сокращённого варианта для взаимодействия с иконкой на сайте.
КОНЦЕПЦИЯ:
Поскольку сайт связан с шаблонами для программирования, в качестве символов были взяты интерфейс кодинг-программ и принцип конструкторов (LEGO, пазлы
и проч.)
✦ создании лаконичного и современного логотипа.
✦ развёрнутая версия с названием [appdb].
✦ сокращённая версия — иконка.
✦ цветовая палитра, которая могла бы стать основой фирменного стиля.
✦ зацикленная анимация перехода из полного варианта в иконку.
✦ 3 анимации сокращённого варианта для взаимодействия с иконкой на сайте.
КОНЦЕПЦИЯ:
Поскольку сайт связан с шаблонами для программирования, в качестве символов были взяты интерфейс кодинг-программ и принцип конструкторов (LEGO, пазлы
и проч.)
ТЕХНИЧЕСКОЕ ЗАДАНИЕ:
✦ создании лаконичного и современного логотипа.
✦ развёрнутая версия с названием [appdb].
✦ сокращённая версия — иконка.
✦ цветовая палитра, которая могла бы стать основой фирменного стиля.
✦ зацикленная анимация перехода из полного варианта
в иконку.
✦ 3 анимации сокращённого варианта для взаимодействия
с иконкой на сайте.
КОНЦЕПЦИЯ:
Поскольку сайт связан с шаблонами для программирования, в качестве символов были взяты интерфейс кодинг-программ и принцип конструкторов (LEGO, пазлы
и проч.)
✦ создании лаконичного и современного логотипа.
✦ развёрнутая версия с названием [appdb].
✦ сокращённая версия — иконка.
✦ цветовая палитра, которая могла бы стать основой фирменного стиля.
✦ зацикленная анимация перехода из полного варианта
в иконку.
✦ 3 анимации сокращённого варианта для взаимодействия
с иконкой на сайте.
КОНЦЕПЦИЯ:
Поскольку сайт связан с шаблонами для программирования, в качестве символов были взяты интерфейс кодинг-программ и принцип конструкторов (LEGO, пазлы
и проч.)
ТЕХНИЧЕСКОЕ ЗАДАНИЕ:
✦ создании лаконичного и современного логотипа.
✦ развёрнутая версия с названием [appdb].
✦ сокращённая версия — иконка.
✦ цветовая палитра, которая могла бы стать основой фирменного стиля.
✦ зацикленная анимация перехода
из полного варианта в иконку.
✦ 3 анимации сокращённого варианта для взаимодействия с иконкой на сайте.
КОНЦЕПЦИЯ:
Поскольку сайт связан с шаблонами для программирования, в качестве символов были взяты интерфейс кодинг-программ
и принцип конструкторов (LEGO, пазлы
и проч.)
✦ создании лаконичного и современного логотипа.
✦ развёрнутая версия с названием [appdb].
✦ сокращённая версия — иконка.
✦ цветовая палитра, которая могла бы стать основой фирменного стиля.
✦ зацикленная анимация перехода
из полного варианта в иконку.
✦ 3 анимации сокращённого варианта для взаимодействия с иконкой на сайте.
КОНЦЕПЦИЯ:
Поскольку сайт связан с шаблонами для программирования, в качестве символов были взяты интерфейс кодинг-программ
и принцип конструкторов (LEGO, пазлы
и проч.)
ПРОЦЕСС:
В стоимость разработки лого входит 5 эскизов и внесение до 3-х правок в готовый вариант.
В стоимость разработки лого входит 5 эскизов и внесение до 3-х правок в готовый вариант.
#анимация
#веб-дизайн
#брендинг
#фирменный_стиль
#UI_дизайн
Ps
Ai
Ae
примерная стоимость:
10 000
₽
Разработка логотипа
по эскизу заказчика
КОНЦЕПЦИЯ:
логотип для выдуманного телешоу, которое появляется в 3D-мультфильме заказчика.
ТЕХНИЧЕСКОЕ ЗАДАНИЕ:
✦ отрисовка логотипа по эскизу.
✦ референс — логотип Шоу Урганта.
✦ 3D-стилистика логотипа.
логотип для выдуманного телешоу, которое появляется в 3D-мультфильме заказчика.
ТЕХНИЧЕСКОЕ ЗАДАНИЕ:
✦ отрисовка логотипа по эскизу.
✦ референс — логотип Шоу Урганта.
✦ 3D-стилистика логотипа.
набросок заказчика
процесс разработки
#иллюстрация
#3D
#веб-дизайн
#брендинг
#фирменный_стиль
Ps
Ai
примерная стоимость:
5 000
₽
UI/UX-
design
дизайн приложений
UI
это user interface, пользовательский интерфейс, проще говоря ― оформление сайта, его внешний вид:
сочетания цветов, шрифты, иконки и кнопки.
сочетания цветов, шрифты, иконки и кнопки.
UX
расшифровывается как user experience ― «пользовательский опыт». Это функционал интерфейса,
простыми словами, это то, каким образом пользователь взаимодействует с интерфейсом и насколько сайт или приложение для него удобны.
простыми словами, это то, каким образом пользователь взаимодействует с интерфейсом и насколько сайт или приложение для него удобны.
разработка приложения
Футуристическое приложение SleepGen позволяет самостоятельно программировать сны и записывать наиболее интересные для повторного воспроизведения.
Референсом послужили музыкальные приложения, а также приложения для медитации.
Визуал и прототип были разработаны в соавторстве с дизайнером и 3D-аниматором.
Референсом послужили музыкальные приложения, а также приложения для медитации.
Визуал и прототип были разработаны в соавторстве с дизайнером и 3D-аниматором.
разработка приложения
Футуристическое приложение SleepGen позволяет самостоятельно программировать сны и записывать наиболее интересные для повторного воспроизведения.
Референсом послужили музыкальные приложения, а также приложения для медитации.
Визуал и прототип были разработаны в соавторстве с дизайнером и 3D-аниматором.
Референсом послужили музыкальные приложения, а также приложения для медитации.
Визуал и прототип были разработаны в соавторстве с дизайнером и 3D-аниматором.
#веб-дизайн
#брендинг
#фирменный_стиль
#UI/UX
#3D
#анимация
#монтаж
#копирайтинг
#вёрстка
Ps
Ai
Ae
примерная стоимость:
67 500
₽
ЛЕНДИНГ для яндекс крауд НА FIGMA
адаптивы для планшета и смартфона
ТЕХНИЧЕСКОЕ ЗАДАНИЕ:
✦ дизайн в стиле Яндекс
✦ корпоративные цвета
✦ плашка меню
✦ кнопка регистрации
✦ инфографика
✦ оформление текста
✦ упоминание партнёров
✦ кнопки для подписки
✦ адаптация для 3-х размеров: компьютер, планшет, смартфон
✦ дизайн в стиле Яндекс
✦ корпоративные цвета
✦ плашка меню
✦ кнопка регистрации
✦ инфографика
✦ оформление текста
✦ упоминание партнёров
✦ кнопки для подписки
✦ адаптация для 3-х размеров: компьютер, планшет, смартфон
Разработка сайта на TILDA.CC
авторское портфолио и лендинг
ЧТО РЕАЛИЗОВАНО:
✦ ЛЕНДНИГ: главная страница-лендинг на двух языках.
✦ РЕПРЕЗЕНТАЦИЯ: краткая презентация ключевых работ на основной странице.
✦ РАЗДЕЛЕНИЕ по узким специализациями: анимация, иллюстрация, веб-дизайн, копирайтинг.
✦ ОПИСАНИЕ РАБОЧИХ ТЕХНИК
✦ АНИМИРОВАННЫ ЕИКОНКИ с подробной информацией.
✦ НАВИГАЦИЯ по всему сайту и внутри отдельных страниц.
✦ СТИЛИЗАЦИЯ
✦ ФАВИКОН
✦ ШАПКА И ПОДВАЛ
✦ АКТИВНЫЕ КНОПКИ с анимацией при наведении курсора и нажатии.
✦ КАСТОМНЫЙ КУРСОР в общей стилистике сайта, нарисованный в Ai и реализованный на страницах с помощью html-кода.
✦ РАБОТА С ШАБЛОНАМИ
✦ РАБОТА С ZERO-БЛОКАМИ
✦ ОПТИМИЗАЦИЯ ДЛЯ ВСЕХ УСТРОЙСТВ
✦ SEO
✦ ТЕГИ
✦ ПОИСК ПО САЙТУ
✦ ЛЕНДНИГ: главная страница-лендинг на двух языках.
✦ РЕПРЕЗЕНТАЦИЯ: краткая презентация ключевых работ на основной странице.
✦ РАЗДЕЛЕНИЕ по узким специализациями: анимация, иллюстрация, веб-дизайн, копирайтинг.
✦ ОПИСАНИЕ РАБОЧИХ ТЕХНИК
✦ АНИМИРОВАННЫ ЕИКОНКИ с подробной информацией.
✦ НАВИГАЦИЯ по всему сайту и внутри отдельных страниц.
✦ СТИЛИЗАЦИЯ
✦ ФАВИКОН
✦ ШАПКА И ПОДВАЛ
✦ АКТИВНЫЕ КНОПКИ с анимацией при наведении курсора и нажатии.
✦ КАСТОМНЫЙ КУРСОР в общей стилистике сайта, нарисованный в Ai и реализованный на страницах с помощью html-кода.
✦ РАБОТА С ШАБЛОНАМИ
✦ РАБОТА С ZERO-БЛОКАМИ
✦ ОПТИМИЗАЦИЯ ДЛЯ ВСЕХ УСТРОЙСТВ
✦ SEO
✦ ТЕГИ
✦ ПОИСК ПО САЙТУ
оформление цифровых пространств
разработка бренд-продуктов
создание фирменного стиля
Специализации:
#анимация
#сценарий
#раскадровка
#режиссура
#монтаж
#иллюстрация
#комикс
#анимационная_скульптура
#3D
#веб-дизайн
#брендинг
#фирменный_стиль
#UI/UX
#копирайтинг
#вёрстка
#SMM-менеджмент
Ps
Ai
Id
Ae
M
aya
TVPaint
ANIMATION 10
cursorVisible: true,
cursorEnlarged: false,
$dot: document.querySelector('.cursor-dot'),
$outline: document.querySelector('.cursor-dot-outline'),
init: function() {
this.dotSize = this.$dot.offsetWidth;
this.outlineSize = this.$outline.offsetWidth;
this.setupEventListeners();
this.animateDotOutline();
},
setupEventListeners: function() {
var self = this;
document.querySelectorAll('a').forEach(function(el) {
el.addEventListener('mouseover', function() {
self.cursorEnlarged = true;
self.toggleCursorSize();
});
el.addEventListener('mouseout', function() {
self.cursorEnlarged = false;
self.toggleCursorSize();
});
});
document.addEventListener('mousedown', function() {
self.cursorEnlarged = true;
self.toggleCursorSize();
});
document.addEventListener('mouseup', function() {
self.cursorEnlarged = false;
self.toggleCursorSize();
});
document.addEventListener('mousemove', function(e) {
self.cursorVisible = true;
self.toggleCursorVisibility();
self.endX = e.clientX;
self.endY = e.clientY;
self.$dot.style.top = self.endY + 'px';
self.$dot.style.left = self.endX + 'px';
});
document.addEventListener('mouseenter', function(e) {
self.cursorVisible = true;
self.toggleCursorVisibility();
self.$dot.style.opacity = 1;
self.$outline.style.opacity = 1;
});
document.addEventListener('mouseleave', function(e) {
self.cursorVisible = true;
self.toggleCursorVisibility();
self.$dot.style.opacity = 0;
self.$outline.style.opacity = 0;
});
},
animateDotOutline: function() {
var self = this;
self._x += (self.endX - self._x) / self.delay;
self._y += (self.endY - self._y) / self.delay;
self.$outline.style.top = self._y + 'px';
self.$outline.style.left = self._x + 'px';
requestAnimationFrame(this.animateDotOutline.bind(self));
},
toggleCursorSize: function() {
var self = this;
if (self.cursorEnlarged) {
self.$dot.style.transform = 'translate(-50%, -50%) scale(4)';
self.$outline.style.transform = "translate(-50%, -50%) scale(0.00)";
} else {
self.$dot.style.transform = 'translate(-50%, -50%) scale(1)';
self.$outline.style.transform = 'translate(-50%, -50%) scale(1)';
}
},
toggleCursorVisibility: function() {
var self = this;
if (self.cursorVisible) {
self.$dot.style.opacity = 1;
self.$outline.style.opacity = 1;
} else {
self.$dot.style.opacity = 0;
self.$outline.style.opacity = 0;
}
}
}
cursor.init();
cursorVisible: true,
cursorEnlarged: false,
$dot: document.querySelector('.cursor-dot'),
$outline: document.querySelector('.cursor-dot-outline'),
init: function() {
this.dotSize = this.$dot.offsetWidth;
this.outlineSize = this.$outline.offsetWidth;
this.setupEventListeners();
this.animateDotOutline();
},
setupEventListeners: function() {
var self = this;
document.querySelectorAll('a').forEach(function(el) {
el.addEventListener('mouseover', function() {
self.cursorEnlarged = true;
self.toggleCursorSize();
});
el.addEventListener('mouseout', function() {
self.cursorEnlarged = false;
self.toggleCursorSize();
});
});
document.addEventListener('mousedown', function() {
self.cursorEnlarged = true;
self.toggleCursorSize();
});
document.addEventListener('mouseup', function() {
self.cursorEnlarged = false;
self.toggleCursorSize();
});
document.addEventListener('mousemove', function(e) {
self.cursorVisible = true;
self.toggleCursorVisibility();
self.endX = e.clientX;
self.endY = e.clientY;
self.$dot.style.top = self.endY + 'px';
self.$dot.style.left = self.endX + 'px';
});
document.addEventListener('mouseenter', function(e) {
self.cursorVisible = true;
self.toggleCursorVisibility();
self.$dot.style.opacity = 1;
self.$outline.style.opacity = 1;
});
document.addEventListener('mouseleave', function(e) {
self.cursorVisible = true;
self.toggleCursorVisibility();
self.$dot.style.opacity = 0;
self.$outline.style.opacity = 0;
});
},
animateDotOutline: function() {
var self = this;
self._x += (self.endX - self._x) / self.delay;
self._y += (self.endY - self._y) / self.delay;
self.$outline.style.top = self._y + 'px';
self.$outline.style.left = self._x + 'px';
requestAnimationFrame(this.animateDotOutline.bind(self));
},
toggleCursorSize: function() {
var self = this;
if (self.cursorEnlarged) {
self.$dot.style.transform = 'translate(-50%, -50%) scale(4)';
self.$outline.style.transform = "translate(-50%, -50%) scale(0.00)";
} else {
self.$dot.style.transform = 'translate(-50%, -50%) scale(1)';
self.$outline.style.transform = 'translate(-50%, -50%) scale(1)';
}
},
toggleCursorVisibility: function() {
var self = this;
if (self.cursorVisible) {
self.$dot.style.opacity = 1;
self.$outline.style.opacity = 1;
} else {
self.$dot.style.opacity = 0;
self.$outline.style.opacity = 0;
}
}
}
cursor.init();