Forum Discussion
Hello Penny and hello everyone.
My contribution comes a little late, but I hope it will be useful 🍀
I had the same situation, and with a JavaScript code (automatically triggered at the beginning of the slide) I managed to create a Zoom effect with the mouse wheel.
Here's the code and the values "scaleStep" (each zoom "notch") and "maxScale" (zoom power) can be adjusted.
This is still experimental (so think about testing), but I'm sure there will be people to help and improve this code.
It's also important to use the recommended image sizes (to avoid blurring with zoom): https://community.articulate.com/series/articulate-storyline-360/articles/storyline-360-adding-and-editing-360-degree-images
Here's an example if you're interested: https://lesdemos.elearningimpact.com/qt/zoom_360
---
let scale = 1;
const scaleStep = 0.1;
const maxScale = 2;
const slideContainer = document.getElementById('slide-window');
slideContainer.style.transition = "transform 0.1s";
slideContainer.addEventListener('wheel', function(event) {
if (event.deltaY < 0) {
if (scale < maxScale) {
scale += scaleStep;
if (scale > maxScale) {
scale = maxScale;
}
}
} else {
if (scale > 1) {
scale -= scaleStep;
if (scale < 1) {
scale = 1;
}
}
}
slideContainer.style.transform = `scale(${scale})`;
event.preventDefault();
}, { passive: false });
You are amazing!! Thank you so much for this!
- ElearningImpact7 months agoCommunity Member
With pleasure Patrik! I'm really happy if it helps you.