commit 3d6497479f6d0a01cd992fc0770e5fa772e80dd7 Author: Bruno Rybársky Date: Mon Apr 22 19:28:46 2024 +0200 init diff --git a/image1.png b/image1.png new file mode 100644 index 0000000..b5652e8 Binary files /dev/null and b/image1.png differ diff --git a/image2.png b/image2.png new file mode 100644 index 0000000..41a33f7 Binary files /dev/null and b/image2.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..281a312 --- /dev/null +++ b/index.html @@ -0,0 +1,24 @@ + + + + + + Image Slider Control + + + +
+ Image 1 + Image 2 +
+
+ + +
+
+ + +
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..0476ee5 --- /dev/null +++ b/script.js @@ -0,0 +1,28 @@ +document.getElementById('upperSlider').addEventListener('input', updateImagePositions); +document.getElementById('lowerSlider').addEventListener('input', updateImagePositions); +updateImagePositions(); +function updateImagePositions() { + const upperSlider = document.getElementById('upperSlider'); + const lowerSlider = document.getElementById('lowerSlider'); + + // Extract settings directly from HTML element attributes + const maxOffset = 50; // Set the maximum movement range in percentage + const upperMax = parseInt(upperSlider.max); + const upperMin = parseInt(upperSlider.min); + const lowerMax = parseInt(lowerSlider.max); + const lowerMin = parseInt(lowerSlider.min); + + let upperValue = parseInt(upperSlider.value); + let lowerValue = parseInt(lowerSlider.value); + + // Convert the slider value to a percentage offset within the specified range + let upperMovePercent = ((upperValue - upperMin) / (upperMax - upperMin) * 2 - 1) * maxOffset; + let lowerMovePercent = ((lowerValue - lowerMin) / (lowerMax - lowerMin) * 2 - 1) * maxOffset; + + // Apply transformation based on the upper slider for image1 + document.getElementById('image1').style.transform = `translateX(${upperMovePercent}%)`; + + // Calculate cumulative transformation for image2 + let totalMovePercent = upperMovePercent + lowerMovePercent; + document.getElementById('image2').style.transform = `translateX(${totalMovePercent}%)`; +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..e1fd2b2 --- /dev/null +++ b/style.css @@ -0,0 +1,30 @@ +/* style.css */ +body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0; + overflow: hidden; /* Prevent body from scrolling */ +} + +.image-container { + overflow: visible; /* Allow images to overflow */ + width: 100vw; /* Full viewport width */ + height: auto; /* Height determined by image heights */ + position: relative; /* Base positioning for relative image movement */ +} + +img { + display: block; + position: relative; /* Relative positioning */ + transform: translateX(-50%); /* Center horizontally */ + transition: left 0.3s ease; /* Smooth left transition */ + max-width: none; /* Prevent scaling */ +} + +.slider-container { + position: relative; /* Ensure sliders are positioned relative to the viewport */ + width: 100%; /* Full width sliders */ + z-index: 1000; /* Above images for easier access */ +}