BRNSystems/babylon_timeline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Test

Browse Source
This commit is contained in:
Bruno Rybársky 2024-05-02 11:30:46 +02:00
parent 3d6497479f
commit a098b8474a
4 changed files with 28 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
image1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 60 KiB

12
index.html
View File

@ -7,17 +7,15 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="image-container" id="both-images"> <div id="image-container">
<img src="image1.png" alt="Image 1" id="image1"> <img src="image1.png" alt="Image 1" id="image1">
<img src="image2.png" alt="Image 2" id="image2"> <img src="image2.png" alt="Image 2" id="image2">
</div> </div>
<div class="slider-container"> <div id="slider-container">
<!-- Set the value to 0 if range is from -500 to 500 --> <!-- Set the value to 0 if range is from -500 to 500 -->
<input type="range" id="upperSlider" min="-500" max="500" value="0"> <input type="range" id="slider" min="-500" max="500" value="0">
</div> <br>
<div class="slider-container"> <button id="resetovac">RESET</button>
<!-- Ensure lower slider starts at zero position -->
<input type="range" id="lowerSlider" min="-500" max="500" value="0">
</div> </div>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>

35
script.js
View File

@ -1,28 +1,25 @@
document.getElementById('upperSlider').addEventListener('input', updateImagePositions); document.getElementById('slider').addEventListener('input', updateImagePositions);
document.getElementById('lowerSlider').addEventListener('input', updateImagePositions); document.getElementById('resetovac').addEventListener('click', resetImagePositions);
updateImagePositions(); updateImagePositions();
function resetImagePositions() {
const slider = document.getElementById('slider');
slider.value = 0;
updateImagePositions();
}
function updateImagePositions() { function updateImagePositions() {
const upperSlider = document.getElementById('upperSlider'); const slider = document.getElementById('slider');
const lowerSlider = document.getElementById('lowerSlider');
// Extract settings directly from HTML element attributes // Extract settings directly from HTML element attributes
const maxOffset = 50; // Set the maximum movement range in percentage const sliderMax = parseInt(slider.max);
const upperMax = parseInt(upperSlider.max); const sliderMin = parseInt(slider.min);
const upperMin = parseInt(upperSlider.min);
const lowerMax = parseInt(lowerSlider.max);
const lowerMin = parseInt(lowerSlider.min);
let upperValue = parseInt(upperSlider.value); let sliderValue = parseInt(slider.value);
let lowerValue = parseInt(lowerSlider.value);
// Convert the slider value to a percentage offset within the specified range // Convert the slider value to a percentage offset within the specified range
let upperMovePercent = ((upperValue - upperMin) / (upperMax - upperMin) * 2 - 1) * maxOffset; let sliderMovePercent = ((sliderValue - sliderMin) / (sliderMax - sliderMin) * 2 - 1) * 100;
let lowerMovePercent = ((lowerValue - lowerMin) / (lowerMax - lowerMin) * 2 - 1) * maxOffset;
// Apply transformation based on the upper slider for image1 document.getElementById('image2').style.transform = `translateX(${sliderMovePercent}%)`;
document.getElementById('image1').style.transform = `translateX(${upperMovePercent}%)`;
// Calculate cumulative transformation for image2
let totalMovePercent = upperMovePercent + lowerMovePercent;
document.getElementById('image2').style.transform = `translateX(${totalMovePercent}%)`;
} }

11
style.css
View File

@ -8,7 +8,7 @@ body {
overflow: hidden; /* Prevent body from scrolling */ overflow: hidden; /* Prevent body from scrolling */
} }
.image-container { #image-container {
overflow: visible; /* Allow images to overflow */ overflow: visible; /* Allow images to overflow */
width: 100vw; /* Full viewport width */ width: 100vw; /* Full viewport width */
height: auto; /* Height determined by image heights */ height: auto; /* Height determined by image heights */
@ -18,13 +18,16 @@ body {
img { img {
display: block; display: block;
position: relative; /* Relative positioning */ position: relative; /* Relative positioning */
transform: translateX(-50%); /* Center horizontally */
transition: left 0.3s ease; /* Smooth left transition */ transition: left 0.3s ease; /* Smooth left transition */
max-width: none; /* Prevent scaling */ width: 100vw;
} }
.slider-container { #slider-container {
position: relative; /* Ensure sliders are positioned relative to the viewport */ position: relative; /* Ensure sliders are positioned relative to the viewport */
width: 100%; /* Full width sliders */ width: 100%; /* Full width sliders */
z-index: 1000; /* Above images for easier access */ z-index: 1000; /* Above images for easier access */
} }
#slider {
width: 100%;
}