react-awesome-cursor
Version:
Most good and awesome cursor with many effect
328 lines (299 loc) • 11.9 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var gsap = require('gsap');
var gsap__default = _interopDefault(gsap);
var React = require('react');
var React__default = _interopDefault(React);
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
/**
* # AwesomeCursor
*
* the custom make cursor to handle some of the event in some
* element in tags html by using [data-cursor] attribute
*
* @returns JSX.Element
*/
var AwesomeCursor = function AwesomeCursor(_ref) {
var _ref$backgroundColor = _ref.backgroundColor,
backgroundColor = _ref$backgroundColor === void 0 ? '#000' : _ref$backgroundColor,
_ref$initialSize = _ref.initialSize,
initialSize = _ref$initialSize === void 0 ? 12.0 : _ref$initialSize,
_ref$animationDuratio = _ref.animationDuration,
animationDuration = _ref$animationDuratio === void 0 ? 1.5 : _ref$animationDuratio,
_ref$magneticAmount = _ref.magneticAmount,
magneticAmount = _ref$magneticAmount === void 0 ? 0.9 : _ref$magneticAmount,
className = _ref.className,
_ref$cursorAnimationD = _ref.cursorAnimationDuration,
cursorAnimationDuration = _ref$cursorAnimationD === void 0 ? 0.7 : _ref$cursorAnimationD,
_ref$enableSpecialEle = _ref.enableSpecialElementScale,
enableSpecialElementScale = _ref$enableSpecialEle === void 0 ? true : _ref$enableSpecialEle;
var cursorRef = React.useRef(null);
var cursorOptions = {
duration: cursorAnimationDuration,
x: 0.0,
y: 0.0,
scale: 1,
opacity: 1,
width: initialSize,
height: initialSize,
background: backgroundColor,
mixBlendMode: 'inherit',
overwrite: true,
ease: gsap.Expo.easeOut,
force3D: true
};
var trackCursor = function trackCursor() {
// define the current options with the new one
// when something happen in options
cursorOptions = _extends({}, cursorOptions, {
width: initialSize,
height: initialSize,
background: backgroundColor
}); // specify the cursor pointer event
// NOTE: this only effect to cursor to move by the
// current cursor position
document.body.addEventListener('mouseenter', function () {
cursorOptions = _extends({}, cursorOptions, {
opacity: 1
}); // Start to animate the cursor
// by all of hooked cursor options
gsap__default.to('#awesome-cursor', cursorOptions);
});
document.body.addEventListener('mousemove', function (e) {
var areaTarget = e.target;
if (enableSpecialElementScale) {
if (areaTarget instanceof HTMLButtonElement || areaTarget instanceof HTMLAnchorElement || areaTarget instanceof HTMLInputElement || areaTarget instanceof HTMLTextAreaElement || areaTarget instanceof HTMLImageElement) {
cursorOptions = _extends({}, cursorOptions, {
scale: 0.8
});
}
} else {
cursorOptions = _extends({}, cursorOptions, {
scale: 1.0
});
}
cursorOptions = _extends({}, cursorOptions, {
x: e.clientX,
y: e.clientY
});
gsap__default.to('#awesome-cursor', cursorOptions);
});
document.body.addEventListener('mouseleave', function () {
cursorOptions = _extends({}, cursorOptions, {
opacity: 0
});
gsap__default.to('#awesome-cursor', cursorOptions);
});
};
var trackElementsCursor = function trackElementsCursor() {
var _document$querySelect, _document$querySelect2, _document$querySelect3, _document$querySelect4, _document$querySelect5, _document$querySelect6;
// define the current options with the new one
// when something happen in options
cursorOptions = _extends({}, cursorOptions, {
width: initialSize,
height: initialSize,
background: backgroundColor
}); // define all of the specify cursor element
// find by using [data-cursor] attribute
// like text, size, color, and more
var sizeCursorElements = (_document$querySelect = document.querySelectorAll('[data-cursor-size]')) != null ? _document$querySelect : [];
var textCursorElements = (_document$querySelect2 = document.querySelectorAll('[data-cursor-text]')) != null ? _document$querySelect2 : [];
var colorCursorElements = (_document$querySelect3 = document.querySelectorAll('[data-cursor-color]')) != null ? _document$querySelect3 : [];
var magneticCursorElements = (_document$querySelect4 = document.querySelectorAll('[data-cursor-magnetic]')) != null ? _document$querySelect4 : [];
var exclusionCursorElements = (_document$querySelect5 = document.querySelectorAll('[data-cursor-exclusion]')) != null ? _document$querySelect5 : [];
var imageCursorElements = (_document$querySelect6 = document.querySelectorAll('[data-cursor-image]')) != null ? _document$querySelect6 : []; // now specify all of listener in all of the child
// for all element that we grab with `mouseenter` and `mouseleave`
sizeCursorElements.forEach(function (el) {
el.addEventListener('mouseenter', function (e) {
var areaTarget = e.target;
var size = parseInt(areaTarget.dataset['cursorSize']);
cursorOptions = _extends({}, cursorOptions, {
width: size,
height: size,
top: -size / 2,
left: -size / 2,
duration: animationDuration
});
});
el.addEventListener('mousemove', function (e) {
var areaTarget = e.target;
var size = parseInt(areaTarget.dataset['cursorSize']);
cursorOptions = _extends({}, cursorOptions, {
width: size,
height: size,
top: -size / 2,
left: -size / 2,
duration: animationDuration
});
});
el.addEventListener('mouseleave', function () {
cursorOptions = _extends({}, cursorOptions, {
width: initialSize,
height: initialSize,
left: 0,
top: 0,
duration: cursorAnimationDuration
});
});
});
textCursorElements.forEach(function (el) {
el.addEventListener('mouseenter', function (e) {
var areaTarget = e.target;
var text = areaTarget.dataset['cursorText'];
var textColor = areaTarget.dataset['cursorTextColor'];
if (cursorRef.current && text) {
cursorRef.current.textContent = text;
}
cursorOptions = _extends({}, cursorOptions, {
color: textColor,
duration: animationDuration
});
});
el.addEventListener('mousemove', function (e) {
var areaTarget = e.target;
var text = areaTarget.dataset['cursorText'];
var textColor = areaTarget.dataset['cursorTextColor'];
if (cursorRef.current && text) {
cursorRef.current.textContent = text;
}
cursorOptions = _extends({}, cursorOptions, {
color: textColor,
duration: animationDuration
});
});
el.addEventListener('mouseleave', function () {
cursorOptions = _extends({}, cursorOptions, {
duration: cursorAnimationDuration
});
if (cursorRef.current) {
cursorRef.current.textContent = '';
}
});
});
colorCursorElements.forEach(function (el) {
el.addEventListener('mouseenter', function (e) {
var areaTarget = e.target;
var color = areaTarget.dataset['cursorColor'];
cursorOptions = _extends({}, cursorOptions, {
background: color,
duration: animationDuration
});
});
el.addEventListener('mousemove', function (e) {
var areaTarget = e.target;
var color = areaTarget.dataset['cursorColor'];
cursorOptions = _extends({}, cursorOptions, {
background: color,
duration: animationDuration
});
});
el.addEventListener('mouseleave', function () {
cursorOptions = _extends({}, cursorOptions, {
background: backgroundColor,
duration: cursorAnimationDuration
});
});
});
exclusionCursorElements.forEach(function (el) {
el.addEventListener('mouseenter', function (e) {
var _areaTarget$dataset$c;
var areaTarget = e.target;
var exclusionColor = (_areaTarget$dataset$c = areaTarget.dataset['cursorExclusionColor']) != null ? _areaTarget$dataset$c : '#fff';
cursorOptions = _extends({}, cursorOptions, {
mixBlendMode: 'exclusion',
background: exclusionColor,
duration: animationDuration
});
});
el.addEventListener('mousemove', function (e) {
var _areaTarget$dataset$c2;
var areaTarget = e.target;
var exclusionColor = (_areaTarget$dataset$c2 = areaTarget.dataset['cursorExclusionColor']) != null ? _areaTarget$dataset$c2 : '#fff';
cursorOptions = _extends({}, cursorOptions, {
mixBlendMode: 'exclusion',
background: exclusionColor,
duration: animationDuration
});
});
el.addEventListener('mouseleave', function () {
cursorOptions = _extends({}, cursorOptions, {
mixBlendMode: 'inherit',
background: backgroundColor,
duration: cursorAnimationDuration
});
});
});
imageCursorElements.forEach(function (el) {
el.addEventListener('mouseenter', function (e) {
var areaTarget = e.target;
var image = areaTarget.dataset['cursorImage'];
cursorOptions = _extends({}, cursorOptions, {
background: "url(\"" + image + "\")",
duration: animationDuration
});
});
el.addEventListener('mousemove', function (e) {
var areaTarget = e.target;
var image = areaTarget.dataset['cursorImage'];
cursorOptions = _extends({}, cursorOptions, {
background: "url(\"" + image + "\")",
duration: animationDuration
});
});
el.addEventListener('mouseleave', function () {
cursorOptions = _extends({}, cursorOptions, {
background: backgroundColor,
duration: cursorAnimationDuration
});
});
});
magneticCursorElements.forEach(function (el) {
el.addEventListener('mousemove', function (e) {
var areaTarget = e.currentTarget; // start the magnetic effect
gsap__default.to(areaTarget, {
x: (e.clientX - (areaTarget.offsetLeft - window.pageXOffset) - areaTarget.clientWidth / 2) * magneticAmount,
y: (e.clientY - (areaTarget.offsetTop - window.pageYOffset) - areaTarget.clientHeight / 2) * magneticAmount,
duration: animationDuration,
ease: gsap.Expo.easeOut,
force3D: true
});
});
el.addEventListener('mouseleave', function (e) {
var areaTarget = e.currentTarget; // stop the magnetic effect
gsap__default.to(areaTarget, {
x: 0,
y: 0,
duration: animationDuration,
ease: gsap.Expo.easeOut
});
});
});
};
React.useEffect(function () {
trackCursor();
});
React.useEffect(function () {
trackElementsCursor();
});
return React__default.createElement("div", {
id: "awesome-cursor",
className: "awesome-cursor " + className,
ref: cursorRef
});
};
exports.default = AwesomeCursor;
//# sourceMappingURL=react-awesome-cursor.cjs.development.js.map