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">
</head>
<body>
<div class="image-container" id="both-images">
<div id="image-container">
<img src="image1.png" alt="Image 1" id="image1">
<img src="image2.png" alt="Image 2" id="image2">
</div>
<div class="slider-container">
<div id="slider-container">
<!-- Set the value to 0 if range is from -500 to 500 -->
<input type="range" id="upperSlider" min="-500" max="500" value="0">
</div>
<div class="slider-container">
<!-- Ensure lower slider starts at zero position -->
<input type="range" id="lowerSlider" min="-500" max="500" value="0">
<input type="range" id="slider" min="-500" max="500" value="0">
<br>
<button id="resetovac">RESET</button>
</div>
<script src="script.js"></script>
</body>

35
script.js
View File

@ -1,28 +1,25 @@
document.getElementById('upperSlider').addEventListener('input', updateImagePositions);
document.getElementById('lowerSlider').addEventListener('input', updateImagePositions);
document.getElementById('slider').addEventListener('input', updateImagePositions);
document.getElementById('resetovac').addEventListener('click', resetImagePositions);
updateImagePositions();
function resetImagePositions() {
const slider = document.getElementById('slider');
slider.value = 0;
updateImagePositions();
}
function updateImagePositions() {
const upperSlider = document.getElementById('upperSlider');
const lowerSlider = document.getElementById('lowerSlider');
const slider = document.getElementById('slider');
// 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);
const sliderMax = parseInt(slider.max);
const sliderMin = parseInt(slider.min);
let upperValue = parseInt(upperSlider.value);
let lowerValue = parseInt(lowerSlider.value);
let sliderValue = parseInt(slider.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;
let sliderMovePercent = ((sliderValue - sliderMin) / (sliderMax - sliderMin) * 2 - 1) * 100;
// 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}%)`;
document.getElementById('image2').style.transform = `translateX(${sliderMovePercent}%)`;
}

11
style.css
View File

@ -8,7 +8,7 @@ body {
overflow: hidden; /* Prevent body from scrolling */
}
.image-container {
#image-container {
overflow: visible; /* Allow images to overflow */
width: 100vw; /* Full viewport width */
height: auto; /* Height determined by image heights */
@ -18,13 +18,16 @@ body {
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 */
width: 100vw;
}
.slider-container {
#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 */
}
#slider {
width: 100%;
}