diff --git a/Service Portal Widgets/Mouse Effect/README.md b/Service Portal Widgets/Mouse Effect/README.md new file mode 100644 index 0000000000..2ae7bec31f --- /dev/null +++ b/Service Portal Widgets/Mouse Effect/README.md @@ -0,0 +1,20 @@ +# Cursor Light Ball Widget + +This ServiceNow Service Portal widget creates a light blue, glowing "light ball" that follows the cursor with a smooth trailing effect. The light ball is offset slightly from the cursor and has a soft glow, giving a visually appealing effect on the page. + +## Widget Components + +### HTML +The widget contains a single `div` element representing the light ball. + +### CSS +This contains the style for the `div` element in HTML + +### Script +This function tracks the cursor's position and updates the light ball's position accordingly with a 10px offset. The mousemove event listener enables smooth, real-time cursor tracking. + +## Installation +1. Add a new widget in ServiceNow and name it, for example, "Cursor Light Ball". +2. Copy the HTML, CSS, and JavaScript code provided into the respective sections of the widget. +3. Make sure you copy the JavaScript code in the Client Script section of the widget. +4. Save the widget, and add it to your Service Portal page to see the light ball effect. \ No newline at end of file diff --git a/Service Portal Widgets/Mouse Effect/index.html b/Service Portal Widgets/Mouse Effect/index.html new file mode 100644 index 0000000000..0460130735 --- /dev/null +++ b/Service Portal Widgets/Mouse Effect/index.html @@ -0,0 +1 @@ +
diff --git a/Service Portal Widgets/Mouse Effect/script.js b/Service Portal Widgets/Mouse Effect/script.js new file mode 100644 index 0000000000..deec28845d --- /dev/null +++ b/Service Portal Widgets/Mouse Effect/script.js @@ -0,0 +1,14 @@ +api.controller=function($scope, $element) { + var lightBall = $element.find('.light-ball'); + + // Update the position of the light ball on mouse move + document.addEventListener('mousemove', function(event) { + var mouseX = event.pageX + 10; // Offset by 10px to the right + var mouseY = event.pageY + 10; // Offset by 10px to the bottom + + // Apply the position to the light ball + lightBall.css({ + transform: 'translate(' + (mouseX - 30) + 'px, ' + (mouseY - 30) + 'px)' + }); + }); +} diff --git a/Service Portal Widgets/Mouse Effect/style.css b/Service Portal Widgets/Mouse Effect/style.css new file mode 100644 index 0000000000..16dde2b1a5 --- /dev/null +++ b/Service Portal Widgets/Mouse Effect/style.css @@ -0,0 +1,13 @@ +/* Light Ball Styling */ +.light-ball { + position: fixed; + top: 0; + left: 0; + width: 60px; + height: 60px; + background-color: rgba(173, 216, 230, 0.8); /* Light blue with slight transparency */ + border-radius: 50%; + filter: blur(25px); /* Creates a fuzzy glow effect */ + pointer-events: none; /* Ensures it doesn't interfere with clicking */ + transition: transform 0.5s ease; /* 500ms latency effect */ +}