Drewski Posted January 13 Share Posted January 13 (edited) Hey I'm trying this neat little dot cursor effect to work on my site and I'm not sure where to start? I love this cursor because its super simple and fits the minimal design of the sight I'm working on but I cannot figure out how to get it to work properly. I keep getting the following ERROR: error evaluating function `rgba`: color functions take numbers as parameters Here is the link to the code. Any help would be greatly appreciated. 🙂 Edited January 13 by Drewski Link to comment
tuanphan Posted January 15 Share Posted January 15 Which exact code did you add to Squarespace? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Drewski Posted January 19 Author Share Posted January 19 Hi tuanphan, I applied the CSS and JS from the link in the OP. Link to comment
tuanphan Posted January 26 Share Posted January 26 Have you added this CSS & JS yet? Also, current Codepen code use Babel, have you converted it to standard JavaScript yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Drewski Posted January 28 Author Share Posted January 28 On 1/26/2023 at 3:38 AM, tuanphan said: Have you added this CSS & JS yet? Also, current Codepen code use Babel, have you converted it to standard JavaScript yet? I have not converted it. That might be the issue. How would I do that? Sorry, I'm relatively new to html/css in squarespace. Do I need to add those links as well? I guess I am a little lost. Link to comment
tuanphan Posted February 1 Share Posted February 1 Try adding this to Code Injection > Footer <div id="app"/> <style> /* play with vars for different effets */ :root { --color-cursor: 220, 90, 90; --cursor-outline-shade: 0.3; --cursor-size: 10px; --cursor-outline-size: 12px; } html, body { cursor: none; background-color: #2f2c2c; color: #fff; font-family: "Inter", sans-serif; } html *, body * { cursor: none; } #app { text-align: center; } h1 { margin-bottom: 0.7em; font-size: 3em; font-weight: 800; text-align: center; } a { text-decoration: none; color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.7); transition: 0.5s ease; } a:hover { color: rgba(255, 255, 255, 0.5); border-bottom-color: rgba(255, 255, 255, 0.1); } p { width: 80%; max-width: 32em; margin: 0 auto 1em; line-height: 1.7; font-weight: 300; } hr { border: 0; height: 2px; width: 3em; background-color: rgba(255, 255, 255, 0.5); margin: 0 auto 1em; } h1 + hr { margin: 0 auto 2em; } #cursor-dot, #cursor-dot-outline { z-index: 999; pointer-events: none; position: absolute; top: 50%; left: 50%; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out; } #cursor-dot { width: var(--cursor-size); height: var(--cursor-size); background-color: rgba(var(--color-cursor), 1); } #cursor-dot-outline { width: var(--cursor-outline-size); height: var(--cursor-outline-size); background-color: rgba(var(--color-cursor), var(--cursor-outline-shade)); } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script> <script> function useEventListener(eventName, handler, element = document) { const savedHandler = React.useRef(); React.useEffect(() => { savedHandler.current = handler; }, [handler]); React.useEffect(() => { const isSupported = element && element.addEventListener; if (!isSupported) return; const eventListener = event => savedHandler.current(event); element.addEventListener(eventName, eventListener); return () => { element.removeEventListener(eventName, eventListener); }; }, [eventName, element]); } /** * Animated Cursor * Replaces the native cursor with a custom animated cursor. * * @author Stephen Scaff */ function AnimatedCursor({ color = '220, 90, 90', outerAlpha = 0.4, innerSize = 8, outerSize = 8, outerScale = 5, innerScale = 0.7 }) { const cursorOuterRef = React.useRef(); const cursorInnerRef = React.useRef(); const requestRef = React.useRef(); const previousTimeRef = React.useRef(); const [coords, setCoords] = React.useState({ x: 0, y: 0 }); const [isVisible, setIsVisible] = React.useState(true); const [isActive, setIsActive] = React.useState(false); const [isActiveClickable, setIsActiveClickable] = React.useState(false); let endX = React.useRef(0); let endY = React.useRef(0); const onMouseMove = React.useCallback(({ clientX, clientY }) => { setCoords({ x: clientX, y: clientY }); cursorInnerRef.current.style.top = clientY + 'px'; cursorInnerRef.current.style.left = clientX + 'px'; endX.current = clientX; endY.current = clientY; }, []); const animateOuterCursor = React.useCallback( time => { if (previousTimeRef.current !== undefined) { coords.x += (endX.current - coords.x) / 8; coords.y += (endY.current - coords.y) / 8; cursorOuterRef.current.style.top = coords.y + 'px'; cursorOuterRef.current.style.left = coords.x + 'px'; } previousTimeRef.current = time; requestRef.current = requestAnimationFrame(animateOuterCursor); }, [requestRef] // eslint-disable-line ); React.useEffect(() => requestRef.current = requestAnimationFrame(animateOuterCursor), [animateOuterCursor]); const onMouseDown = React.useCallback(() => setIsActive(true), []); const onMouseUp = React.useCallback(() => setIsActive(false), []); const onMouseEnter = React.useCallback(() => setIsVisible(true), []); const onMouseLeave = React.useCallback(() => setIsVisible(false), []); useEventListener('mousemove', onMouseMove, document); useEventListener('mousedown', onMouseDown, document); useEventListener('mouseup', onMouseUp, document); useEventListener('mouseenter', onMouseEnter, document); useEventListener('mouseleave', onMouseLeave, document); React.useEffect(() => { if (isActive) { cursorInnerRef.current.style.transform = `scale(${innerScale})`; cursorOuterRef.current.style.transform = `scale(${outerScale})`; } else { cursorInnerRef.current.style.transform = 'scale(1)'; cursorOuterRef.current.style.transform = 'scale(1)'; } }, [innerScale, outerScale, isActive]); React.useEffect(() => { if (isActiveClickable) { cursorInnerRef.current.style.transform = `scale(${innerScale * 1.3})`; cursorOuterRef.current.style.transform = `scale(${outerScale * 1.4})`; } }, [innerScale, outerScale, isActiveClickable]); React.useEffect(() => { if (isVisible) { cursorInnerRef.current.style.opacity = 1; cursorOuterRef.current.style.opacity = 1; } else { cursorInnerRef.current.style.opacity = 0; cursorOuterRef.current.style.opacity = 0; } }, [isVisible]); React.useEffect(() => { const clickables = document.querySelectorAll( 'a, input[type="submit"], input[type="image"], label[for], select, button, .link'); clickables.forEach(el => { el.style.cursor = 'none'; el.addEventListener('mouseover', () => { setIsActive(true); }); el.addEventListener('click', () => { setIsActive(true); setIsActiveClickable(false); }); el.addEventListener('mousedown', () => { setIsActiveClickable(true); }); el.addEventListener('mouseup', () => { setIsActive(true); }); el.addEventListener('mouseout', () => { setIsActive(false); setIsActiveClickable(false); }); }); return () => { clickables.forEach(el => { el.removeEventListener('mouseover', () => { setIsActive(true); }); el.removeEventListener('click', () => { setIsActive(true); setIsActiveClickable(false); }); el.removeEventListener('mousedown', () => { setIsActiveClickable(true); }); el.removeEventListener('mouseup', () => { setIsActive(true); }); el.removeEventListener('mouseout', () => { setIsActive(false); setIsActiveClickable(false); }); }); }; }, [isActive]); const styles = { cursor: { zIndex: 999, position: 'fixed', opacity: 1, pointerEvents: 'none', transition: 'opacity 0.15s ease-in-out, transform 0.15s ease-in-out' }, cursorInner: { position: 'fixed', borderRadius: '50%', width: innerSize, height: innerSize, pointerEvents: 'none', backgroundColor: `rgba(${color}, 1)`, transition: 'opacity 0.15s ease-in-out, transform 0.25s ease-in-out' }, cursorOuter: { position: 'fixed', borderRadius: '50%', pointerEvents: 'none', width: outerSize, height: outerSize, backgroundColor: `rgba(${color}, ${outerAlpha})`, transition: 'opacity 0.15s ease-in-out, transform 0.15s ease-in-out' } }; return /*#__PURE__*/( React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { ref: cursorOuterRef, style: styles.cursorOuter }), /*#__PURE__*/ React.createElement("div", { ref: cursorInnerRef, style: styles.cursorInner }))); } function App() { return /*#__PURE__*/( React.createElement("div", { className: "App" }, /*#__PURE__*/ React.createElement(AnimatedCursor, null), /*#__PURE__*/ React.createElement("section", null, /*#__PURE__*/ React.createElement("h1", null, "Animated Cursor ", /*#__PURE__*/React.createElement("br", null), "React Component"), /*#__PURE__*/ React.createElement("hr", null), /*#__PURE__*/ React.createElement("p", null, "An animated cursor component made as a ", /*#__PURE__*/React.createElement("a", null, "Functional Component"), ", using ", /*#__PURE__*/React.createElement("a", null, "React hooks"), " like ", /*#__PURE__*/React.createElement("a", null, "useEffect"), " to handle event listeners, local state, an ", /*#__PURE__*/React.createElement("a", null, "RequestAnimationFrame"), " management."), /*#__PURE__*/ React.createElement("p", null, "Hover over these ", /*#__PURE__*/React.createElement("a", null, "links"), " and see how that animated cursor does it's thing. Kinda nifty, right? Not right for most things, but a nice move for more interactive-type projects. Here's another ", /*#__PURE__*/React.createElement("a", { href: "" }, "link to nowhere.")), /*#__PURE__*/ React.createElement("p", null, "Play with the ", /*#__PURE__*/React.createElement("a", null, "css variables"), " to influence the cursor, cursor outline size, and amount of scale on target hover. I suppose those could all be ", /*#__PURE__*/React.createElement("a", null, "props"), " with some. Click in the margin to check click animation."), /*#__PURE__*/ React.createElement("p", null, "There's probably a better way to manage these kind of events, but this was the best I could come up with. Recently started mucking more with React cause I'm down with the simplicity of Functional Components and Hooks. And if you read the docs, the future ain't class components. So, best get on them functions.")))); } ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById('app')); </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment