Skip to content

Commit 9acf357

Browse files
authored
Add cursor-following light ball widget with smooth trailing effect (#1593)
- Added a light blue, glowing ball effect that follows the cursor on the Service Portal page. - Included offset, smooth transitions, and glow effect to enhance the visual experience. - README.md provides full setup instructions, styling, and usage notes.
1 parent 77bce1e commit 9acf357

File tree

4 files changed

+48
-0
lines changed

4 files changed

+48
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Cursor Light Ball Widget
2+
3+
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.
4+
5+
## Widget Components
6+
7+
### HTML
8+
The widget contains a single `div` element representing the light ball.
9+
10+
### CSS
11+
This contains the style for the `div` element in HTML
12+
13+
### Script
14+
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.
15+
16+
## Installation
17+
1. Add a new widget in ServiceNow and name it, for example, "Cursor Light Ball".
18+
2. Copy the HTML, CSS, and JavaScript code provided into the respective sections of the widget.
19+
3. Make sure you copy the JavaScript code in the Client Script section of the widget.
20+
4. Save the widget, and add it to your Service Portal page to see the light ball effect.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div class="light-ball"></div>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
api.controller=function($scope, $element) {
2+
var lightBall = $element.find('.light-ball');
3+
4+
// Update the position of the light ball on mouse move
5+
document.addEventListener('mousemove', function(event) {
6+
var mouseX = event.pageX + 10; // Offset by 10px to the right
7+
var mouseY = event.pageY + 10; // Offset by 10px to the bottom
8+
9+
// Apply the position to the light ball
10+
lightBall.css({
11+
transform: 'translate(' + (mouseX - 30) + 'px, ' + (mouseY - 30) + 'px)'
12+
});
13+
});
14+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/* Light Ball Styling */
2+
.light-ball {
3+
position: fixed;
4+
top: 0;
5+
left: 0;
6+
width: 60px;
7+
height: 60px;
8+
background-color: rgba(173, 216, 230, 0.8); /* Light blue with slight transparency */
9+
border-radius: 50%;
10+
filter: blur(25px); /* Creates a fuzzy glow effect */
11+
pointer-events: none; /* Ensures it doesn't interfere with clicking */
12+
transition: transform 0.5s ease; /* 500ms latency effect */
13+
}

0 commit comments

Comments
 (0)