In the gallery the slider is positioned on the far right side and set to follow the cursor, the after image is reveled as mouse is moved to the left, the slider does reset to the far right after every image transition but the problem is that cursor doesn’t so when it is moved the slider jumps to the position the cursor is, partly or fully reveling the after image
I created the code for pointer locker as proof of concept that worked even with transitioning via clicks on chrome, when clicked on site the pointer locker is activated and red ball becomes the custom cursor and when clicked both the background color is changed and cursor position is reset to far right, background color transition could be image transition and slider could follow the custom cursor, ideally simpler solution not requiring pointer locker would be nice, but if not then aid with integrating pointer locker solution with gallery code would be appreciated
Pointer locker
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pointer Lock Example</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: pink;
height: 100vh;
}
#dot {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
pointer-events: none;
z-index: 999;
opacity: 0.8;
visibility: hidden; /* Hidden before pointer lock */
}
#message {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}
</style>
</head>
<body>
<div id="dot"></div>
<div id="message">Click anywhere to activate Pointer Lock. Press 'Q' to reset the dot position.</div>
<script>
var dot = document.getElementById("dot");
var x = window.innerWidth / 2; // Start at the center horizontally
var y = window.innerHeight / 2; // Start at the center vertically
var pointerLocked = false;
// Position the dot at the initial center of the screen
dot.style.left = `${x}px`;
dot.style.top = `${y}px`;
// Function to toggle the background color and reset the dot to the far right
function toggleBackgroundColor() {
if (document.body.style.backgroundColor === "pink") {
document.body.style.backgroundColor = "purple";
} else {
document.body.style.backgroundColor = "pink";
}
resetCursorToFarRight(); // Move the cursor to the far right on color change
}
// Function to reset the cursor to the far right
function resetCursorToFarRight() {
x = window.innerWidth - 20; // Set the x position to the far right
dot.style.left = `${x}px`;
}
// Lock the pointer and toggle background color on click
document.body.addEventListener("click", function () {
toggleBackgroundColor();
// If pointer is not locked, request pointer lock
if (!pointerLocked) {
document.body.requestPointerLock(); // Lock the pointer
}
});
// Listen for pointer lock change to handle the cursor state
document.addEventListener("pointerlockchange", function () {
if (document.pointerLockElement === document.body) {
pointerLocked = true; // Pointer is now locked
dot.style.visibility = "visible"; // Show the controlled dot during pointer lock
document.body.style.cursor = "none"; // Hide the system cursor
document.getElementById('message').innerText = "Move your mouse to move the dot. Press 'Q' to reset. Press Esc to exit Pointer Lock.";
} else {
pointerLocked = false; // Pointer is unlocked
dot.style.visibility = "hidden"; // Hide the dot (custom cursor) after pointer lock is exited
document.body.style.cursor = "auto"; // Show the system cursor
document.getElementById('message').innerText = "Click anywhere to activate Pointer Lock.";
}
});
// Track mouse movement when pointer is locked
document.addEventListener("mousemove", function (event) {
if (document.pointerLockElement === document.body) {
x += event.movementX; // Move horizontally
y += event.movementY; // Move vertically, but this will be restricted later
// Restrict the cursor horizontally
if (x < 0) {
x = 0; // Restrict movement at the left edge
}
if (x > window.innerWidth - 20) {
x = window.innerWidth - 20; // Restrict movement at the right edge
}
// Keep the y position fixed (vertically locked)
y = window.innerHeight / 2;
dot.style.left = `${x}px`;
dot.style.top = `${y}px`;
}
});
// Listen for keyboard input to reset dot position to the far right (press 'Q')
document.addEventListener("keydown", function (event) {
if (document.pointerLockElement === document.body && event.key.toLowerCase() === 'q') {
resetCursorToFarRight(); // Reset the dot position to the far right
}
});
// Handle Escape key to exit pointer lock manually
document.addEventListener('keydown', function (event) {
if (event.key === 'Escape' && document.pointerLockElement === document.body) {
document.exitPointerLock();
}
});
</script>
</body>
</html>
Gallery, switch to slider mode by pressing W. To recrate just create two folders named “1 before” and “1 after” put two jpg images in each folder named “1” and “2” put them into the same folder as html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dual Mode Gallery</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
font-family: sans-serif;
color: #fff;
}
.fullscreen-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
cursor: none; /* Default to transparent cursor */
}
.image-container {
position: relative;
width: 100%;
height: 100%;
}
.gallery-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.before-image,
.after-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.after-image {
clip-path: polygon(0 0, 0 100%, var(--clip-value) 100%, var(--clip-value) 0);
}
.slider {
position: absolute;
top: 0;
bottom: 0;
left: 100%;
transform: translateX(-100%);
width: 10px;
background: transparent;
cursor: none; /* Transparent cursor */
}
.slider-gallery {
display: none; /* Initially hide slider mode */
}
.quick-menu {
position: fixed;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.8);
padding: 5px;
border-radius: 5px;
font-size: 12px;
display: none; /* Initially hidden */
}
.quick-menu h4 {
margin: 0;
font-size: 14px;
text-align: center;
}
.quick-menu ul {
padding: 0;
list-style: none;
margin: 5px 0 0;
}
.quick-menu li {
margin: 0;
}
</style>
</head>
<body>
<div class="fullscreen-container alternating-gallery">
<div class="image-container">
<img class="gallery-image" src="">
</div>
</div>
<div class="fullscreen-container slider-gallery">
<div class="image-container">
<img class="before-image" src="1 before/1.jpg">
<img class="after-image" src="1 after/1.jpg" style="--clip-value: 100%;">
<div class="slider"></div>
</div>
</div>
<div class="quick-menu" id="quickMenu">
<h4>Menu</h4>
<ul>
<li>Left-click: Next</li>
<li>Right-click: Previous</li>
<li>Arrow keys: Navigate</li>
<li>W: Toggle mode</li>
<li>R: Toggle menu</li>
</ul>
</div>
<script>
let mode = 'Alternating'; // Default mode
let currentImageIndex = 0;
let menuVisible = false;
const alternatingContainer = document.querySelector('.alternating-gallery');
const sliderContainer = document.querySelector('.slider-gallery');
const quickMenu = document.getElementById('quickMenu');
const fullscreenContainers = document.querySelectorAll('.fullscreen-container');
// --- Alternating Gallery Mode Variables ---
const alternatingGalleryImage = document.querySelector('.gallery-image');
const alternatingImages = [
{ folder: '1 before', name: '1.jpg' },
{ folder: '1 after', name: '1.jpg' },
{ folder: '1 before', name: '2.jpg' },
{ folder: '1 after', name: '2.jpg' }
];
function loadAlternatingImage() {
const image = alternatingImages[currentImageIndex];
alternatingGalleryImage.src = `${image.folder}/${image.name}`;
}
function nextAlternatingImage() {
currentImageIndex = (currentImageIndex + 1) % alternatingImages.length;
loadAlternatingImage();
}
function prevAlternatingImage() {
currentImageIndex = (currentImageIndex - 1 + alternatingImages.length) % alternatingImages.length;
loadAlternatingImage();
}
// --- Slider Gallery Mode Variables ---
const sliderBeforeImage = document.querySelector('.before-image');
const sliderAfterImage = document.querySelector('.after-image');
const slider = document.querySelector('.slider');
const sliderImages = ['1.jpg', '2.jpg'];
function updateSliderPosition(x) {
slider.style.left = `${x}px`;
sliderAfterImage.style.setProperty('--clip-value', `${x}px`);
}
function nextSliderImage() {
currentImageIndex = (currentImageIndex + 1) % sliderImages.length;
sliderBeforeImage.src = `1 before/${sliderImages[currentImageIndex]}`;
sliderAfterImage.src = `1 after/${sliderImages[currentImageIndex]}`;
updateSliderPosition(sliderContainer.offsetWidth); // Reset slider to far right
}
function prevSliderImage() {
currentImageIndex = (currentImageIndex - 1 + sliderImages.length) % sliderImages.length;
sliderBeforeImage.src = `1 before/${sliderImages[currentImageIndex]}`;
sliderAfterImage.src = `1 after/${sliderImages[currentImageIndex]}`;
updateSliderPosition(sliderContainer.offsetWidth); // Reset slider to far right
}
sliderContainer.addEventListener('mousemove', (e) =>
updateSliderPosition(e.clientX - sliderContainer.offsetLeft)
);
sliderContainer.addEventListener('click', () => nextSliderImage());
// --- Mode Switching ---
function toggleMode() {
if (mode === 'Alternating') {
mode = 'Slider';
alternatingContainer.style.display = 'none';
sliderContainer.style.display = 'flex';
currentImageIndex = 0; // Reset index
nextSliderImage(); // Load the first slider image
} else {
mode = 'Alternating';
sliderContainer.style.display = 'none';
alternatingContainer.style.display = 'flex';
currentImageIndex = 0; // Reset index
loadAlternatingImage(); // Load the first alternating image
}
console.log(`Mode switched to: ${mode}`);
}
// --- Toggle Menu Visibility ---
function toggleMenu() {
menuVisible = !menuVisible;
quickMenu.style.display = menuVisible ? 'block' : 'none';
fullscreenContainers.forEach(container => {
container.style.cursor = menuVisible ? 'default' : 'none';
});
}
document.addEventListener('keydown', (e) => {
if (e.key === 'w') {
toggleMode();
} else if (e.key === 'ArrowRight') {
mode === 'Alternating' ? nextAlternatingImage() : nextSliderImage();
} else if (e.key === 'ArrowLeft') {
mode === 'Alternating' ? prevAlternatingImage() : prevSliderImage();
} else if (e.key === 'r') {
toggleMenu();
}
});
alternatingContainer.addEventListener('click', nextAlternatingImage);
alternatingContainer.addEventListener('contextmenu', (e) => {
e.preventDefault();
prevAlternatingImage();
});
sliderContainer.addEventListener('contextmenu', (e) => {
e.preventDefault();
prevSliderImage();
});
// Initialize default mode
loadAlternatingImage();
</script>
</body>
</html>