Animierte Sequenz mit Uislider

Question

ive gerade angefangen zu lernen jquery und ich kämpfe. Ich versuche, eine Offline-Seite zu erstellen, die einen Benutzer enthält, der eine Reihe von Bildern (Frames) verknüpft, so dass beim Ziehen des Sliders eine Animation erstellt wird. . Ich würde gerne einen lokalen Ordner nach Möglichkeit überprüfen und alle Bilder in diesem Ordner verwenden, um die Bilder in html aufzulisten, da es mehr als 200 Bilder geben wird. Ich möchte auch, dass die Position des Sliders zwischen Webseiten und Aktualisierungen gespeichert wird, da ich unterschiedliche Ansichten derselben Animation haben möchte.

würde jede mögliche Hilfe

Answer 1

unten arbeitet geschätzt werden, da es GSAP verwenden sollte, aber ich brauche einen Weg zu implementieren, die den Zustand auf Refresh und zwischen den Seiten zu retten?

<div id="wrapper"> 
    <div id="demoWrapper"> 
    <div id='image'> 
    <img src="" /> > 
    <img src="" /> 
    <img src="" />  
    </div> 

    <div id="sliderWrapper"> 
    <div id="slider"></div> 
    </div> 
    </div> 
    <div id="nav-bar"> 
    <button id="play">play</button> 
    <button id="pause">pause</button> 
    <button id="reverse">reverse</button> 
    <button id="restart">restart</button> 
    </div> 

    </div> 

    $(document).ready(function() { 

    var images = $('#image').children(), // images in the sequence 
    fps = 1, 
    duration = 1/fps; 

    var tl = new TimelineLite({ 

    onUpdate:updateSlider}) 
.staggerTo(images, 0, {position: 'static', visibility: 'visible' },  duration, 0) 
.staggerTo(images.not(images.last()), 0, {position: 'absolute',  visibility: 'hidden', immediateRender: false }, duration, duration) 
.set({}, {}, "+="+duration); 





$("#play").click(function() { 
//play() only plays forward from current position. If timeline has  finished, play() has nowhere to go. 
    //if the timeline is not done then play() or else restart() (restart always restarts from the beginning). 

    if(tl.progress() != 1){ 

    tl.play(); 
} else { 
tl.restart(); 
} 
}); 

$("#pause").click(function() { 
    tl.pause(); 
    }); 

$("#reverse").click(function() { 
    tl.reverse(); 
}); 



    $("#restart").click(function() { 
    tl.restart(); 
    });  


$("#slider").slider({ 
range: "max", 
min: 0, 
max: 100, 
    step:1, 
slide: function (event, ui) { 
tl.pause(); 
//adjust the timeline's progress() based on slider value 
tl.progress(ui.value/100); 

} 
}); 



function updateSlider() { 
$("#slider").slider("value", tl.progress() *100); 
} 
});