ive started learning jquery , im struggling. im trying create offline page incorporated uislider links series of images (frames) when slider dragged creates animation. . check local folder if possible , use images in folder apposed listing images in html there on 200 images. position of slider remembered between webpages , refresh have different different views of same animation.
any appreciated
below works should using gsap need implement way save state on refresh , between pages?
<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 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() plays forward current position. if timeline has finished, play() has go. //if timeline not done play() or else restart() (restart restarts 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 timeline's progress() based on slider value tl.progress( ui.value/100 ); } }); function updateslider() { $("#slider").slider("value", tl.progress() *100); } }); 
Comments
Post a Comment