Мобильная версияЯ создал код для блокировки указателя в качестве доказательства концепции это работало даже при переходе через нажимает на Chrome, при нажатии на сайт активируется блокировка указателя, и красный шарик становится настраиваемым курсором, а при нажатии меняется цвет фона и положение курсора сбрасывается в крайнее правое положение, переход цвета фона может быть переходом изображения, а ползунок может следовать за собственный курсор, в идеале было бы неплохо более простое решение, не требующее блокировки указателя, но если нет, то помощь с интеграцией решения для блокировки указателя с кодом галереи будет оценена по достоинству.
Блокировщик указателя
Pointer Lock Example
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;
}
Click anywhere to activate Pointer Lock. Press 'Q' to reset the dot position.
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();
}
});
Галерея, переключитесь в режим слайдера, нажав W. Чтобы воссоздать просто создайте две папки с именами «1 до» и «1 после», поместите по два изображения jpg в каждую папку с именами «1» и « 2" поместил их в ту же папку, что и html.
Dual Mode Gallery
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;
}
Menu
- Left-click: Next
- Right-click: Previous
- Arrow keys: Navigate
- W: Toggle mode
- R: Toggle menu
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();
Подробнее здесь: https://stackoverflow.com/questions/793 ... -after-sli
