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

init

Browse Source
This commit is contained in:
Bruno Rybársky 2024-04-22 19:28:46 +02:00
commit 3d6497479f
5 changed files with 82 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
image1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
image2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

24
index.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slider Control</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="image-container" id="both-images">
<img src="image1.png" alt="Image 1" id="image1">
<img src="image2.png" alt="Image 2" id="image2">
</div>
<div class="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">
</div>
<script src="script.js"></script>
</body>
</html>

28
script.js Normal file
View File

@ -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}%)`;
}

30
style.css Normal file
View File

@ -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 */
}