{"id":5530,"date":"2023-12-28T04:54:19","date_gmt":"2023-12-28T04:54:19","guid":{"rendered":"https:\/\/graphica.pe\/floating-cursor\/"},"modified":"2024-07-11T20:55:36","modified_gmt":"2024-07-11T20:55:36","slug":"floating-cursor","status":"publish","type":"post","link":"https:\/\/graphica.pe\/en\/floating-cursor\/","title":{"rendered":"Floating cursor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"5530\" class=\"elementor elementor-5530 elementor-4622\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-58f867aa e-flex e-con-boxed e-con e-parent\" data-id=\"58f867aa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4971ad12 elementor-widget elementor-widget-text-editor\" data-id=\"4971ad12\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We add the library:<\/p>\n<ul>\n<li>[Nombre de libreria]<\/li>\n<\/ul>\n<p>CSS:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4cc645ee elementor-widget elementor-widget-code-highlight\" data-id=\"4cc645ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-twilight copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>\/* CURSOR *\/\r\n#cursorElement{\r\n\tposition: fixed;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\twidth: 25px;\r\n\theight: 25px;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\tpointer-events: none;\r\n\tz-index: 99999;\r\n\tmix-blend-mode: exclusion; \r\n}\r\n#cursorElement::before{\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tmix-blend-mode: exclusion; \r\n\tpointer-events: none;\r\n\tz-index: 99999;\r\n\tbackground: transparent;\r\n\tborder: 1px solid #fff;\r\n\topacity: 1;\r\n\tborder-radius: 100%;\r\n}\r\n#cursorElement #cursor_arrow{\r\n\topacity: 0;\r\n\ttransition: .6s;\r\n\ttransform: scale(0.3);\r\n\tpointer-events: none;\r\n}\r\n#cursorElement.showArrow{\r\n\tcursor: pointer;\r\n\tpointer-events: none;\r\n}\r\n#cursorElement.showArrow #cursor_arrow{\r\n\topacity: 0;\r\n\ttransform: scale(1);\r\n\tpointer-events: none;\r\n\tdisplay: none;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a350557 elementor-widget elementor-widget-text-editor\" data-id=\"a350557\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>JS:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-34e1366 elementor-widget elementor-widget-code-highlight\" data-id=\"34e1366\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-twilight copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\/* window on load *\/\r\n$(window).on('load', function() {\r\n\tcursorPointer();\r\n});\r\n\r\n\/* Cursor *\/\r\n\tfunction cursorPointer() {\r\n\t\tif( window.innerWidth >= 1050 ){\r\n\t\t\tlet cursorElement = document.createElement('div');\r\n\t\t\tcursorElement.id = 'cursorElement';\r\n\t\t\tdocument.querySelector('body').append(cursorElement);\r\n\r\n\t\t\tlet cursor = document.createElement('img');\r\n\t\t\tcursor.id = 'cursor_arrow';\r\n\t\t\tcursor.src = \"\/wp-content\/uploads\/2023\/04\/cursor.svg\"\r\n\t\t\tcursorElement.append(cursor);\r\n\r\n\t\t\tgsap.set(cursorElement, { xPercent: -50, yPercent: -50 });\r\n\r\n\t\t\tvar pos = { x: window.innerWidth \/ 2, y: window.innerHeight \/ 2 };\r\n\t\t\tvar mouse = { x: pos.x, y: pos.y };\r\n\t\t\tvar speed = 0.3;\r\n\r\n\t\t\tvar fpms = 60 \/ 1000;\r\n\r\n\t\t\tvar xSet = gsap.quickSetter(cursorElement, \"x\", \"px\");\r\n\t\t\tvar ySet = gsap.quickSetter(cursorElement, \"y\", \"px\");\r\n\r\n\t\t\twindow.addEventListener(\"mousemove\", e => {\r\n\t\t\t\tmouse.x = e.x;\r\n\t\t\t\tmouse.y = e.y;\r\n\t\t\t});\r\n\r\n\t\t\tgsap.ticker.add((time, deltaTime) => {\r\n\t\t\t\tvar delta = deltaTime * fpms;\r\n\t\t\t\tvar dt = 1.0 - Math.pow(1.0 - speed, delta);\r\n\r\n\t\t\t\tpos.x += (mouse.x - pos.x) * dt;\r\n\t\t\t\tpos.y += (mouse.y - pos.y) * dt;\r\n\t\t\t\txSet(pos.x);\r\n\t\t\t\tySet(pos.y);\r\n\t\t\t});\r\n\r\n\t\t\t\/\/ Mostrar flecha al entrar en elementos con la clase\r\n\t\t\tdocument.querySelectorAll('.cursor__show-arrow').forEach((elem) =>{\r\n\t\t\t\telem.addEventListener(\"mouseenter\", (el) => {\r\n\t\t\t\t\tcursorElement.classList.add('showArrow')\r\n\t\t\t\t\tgsap.to('#cursorElement', { width: '80px', height: '80px' })\r\n\t\t\t\t})\r\n\r\n\t\t\t\telem.addEventListener(\"mouseleave\", (el) => {\r\n\t\t\t\t\tcursorElement.classList.remove('showArrow')\r\n\t\t\t\t\tgsap.to('#cursorElement', { width: '25px', height: '25px' })\r\n\t\t\t\t})\r\n\t\t\t});\r\n\t\t}\r\n\t}\r\n\t\/* Fin Cursor *\/<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>We add the library: [Nombre de libreria] CSS: \/* CURSOR *\/ #cursorElement{ position: fixed; display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; top: 0; left: 0; pointer-events: none; z-index: 99999; mix-blend-mode: exclusion; } #cursorElement::before{ content: &#8220;&#8221;; position: absolute; width: 100%; height: 100%; mix-blend-mode: exclusion; pointer-events: none; z-index: 99999; background: transparent; border: 1px solid [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-5530","post","type-post","status-publish","format-standard","hentry"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/posts\/5530","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/comments?post=5530"}],"version-history":[{"count":0,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/posts\/5530\/revisions"}],"wp:attachment":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/media?parent=5530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/categories?post=5530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/tags?post=5530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}