страница временно недоступна
animation
анимация
Hello, this page is under construction and will be up and running soon... Thank you for your consideration.
На данный момент страница находится в разработке. Спасибо за внимание.
TVPaint
ANIMATION 10
aya
M
Ae
Id
Ai
Ps
#SMM-менеджмент
#вёрстка
#копирайтинг
#UI/UX
#фирменный_стиль
#брендинг
#веб-дизайн
#3D
#анимационная_скульптура
#комикс
#иллюстрация
#монтаж
#режиссура
#раскадровка
#сценарий
#анимация
Специализации:
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();