<style>
/* CSS style to make the model-viewer element occupy full width and height */
model-viewer {
width: 100%;
height: 100%;
}
</style>
<model-viewer onload="StartScroll()" id="zpennachi" preload shadow-intensity="0" shadow-softness="0" src="https://cdn.prod.website-files.com/643af806354c783eb866d160/643dc3c156cf1c305bdb76c6_anianiainainani.glb" alt="low-code 3D" camera-target=".8m -3m -9m" camera-orbit="0deg 75deg 30.31m" field-of-view="8deg"></model-viewer>
<script>
// Variables to manage model's playback state
let pauseTimeout;
let isPlaying = true;
// Function to handle scroll events
function scrollHandler() {
const modelViewer = document.querySelector('#zpennachi');
const screenHeight = window.innerHeight;
// Calculate and set the model's playback time based on scroll position
modelViewer.currentTime = window.scrollY / screenHeight;
console.log('currentTime:', modelViewer.currentTime);
// Adjust the playback speed
modelViewer.timeScale = 0.99;
// Resume playback if it was paused
if (!isPlaying) {
modelViewer.play();
isPlaying = true;
}
// Clear previous pause timeout and set a new one
clearTimeout(pauseTimeout);
pauseTimeout = setTimeout(() => {
// Pause playback after a short delay of 0 milliseconds
modelViewer.pause();
isPlaying = false;
}, 0);
}
// Function to initialize scroll-controlled animation
function StartScroll() {
const modelViewer = document.querySelector('#zpennachi');
const screenHeight = window.innerHeight;
// Set the initial playback time based on current scroll position
const initialTime = window.scrollY / screenHeight;
modelViewer.currentTime = initialTime;
// Add scroll event listener to trigger the scrollHandler function
window.addEventListener('scroll', scrollHandler);
}
</script>
.png)