jquery - Javascript animation with variable speed based on cursors position -

-

what want achieve javascript animation variable speed based on cursor position.

for porpouse i'm using jquery's animate function , mousever event , javascript's setinterval function, aren't required, if there better way achieve more happy hear (the requeriment javascript).

the problem i'm facing can't change speed dinamicly, reason speed keeps adding 1 had instead of set wanted , if change spected doesn't happen in smoothly way because of unknown reason me.

here javascript have far:

//settings container_slider. used in startslider() handles animation var steps_animation_speed = 1000; var steps_interval = 1500; var steps_speed_factor = 1;     // 100% var amount_sliders = 3;  //cache dom elements var $container_slider = $('#container_slider'); var $shown_slides = $('.shown_slides', $container_slider); var $slide = $(".slide");  // making sure sizing (widths) fits should. var slides_width = $container_slider.width()/amount_sliders; var slides_margin = parseint($slide.css('marginleft').replace('px', '')) + parseint($slide.css('marginright').replace('px', '')); var steps_width = slides_width + slides_margin; $shown_slides.css('width', steps_width*(amount_sliders+1) + 'px'); $slide.css('width', slides_width);  var interval;  // function responsible of animation function startslider() {     $shown_slides.stop(false);     interval = setinterval(function() {         $shown_slides.animate({'margin-left': '-='+steps_width}, steps_animation_speed*steps_speed_factor, function() {             $('.shown_slides > li:last').after($('.shown_slides > li:first'));             $('.shown_slides').css('margin-left', '0');         });     }, steps_interval);    }  function pauseslider() {     clearinterval(interval); }  $container_slider.mouseleave(function(){     steps_interval = 3000;     $shown_slides.stop(true);     pauseslider();     startslider(); });  // $container_slider.mouseenter(function(){ //  pauseslider(); // });  $container_slider.mousemove(function(event){     pauseslider();     var cursor_location = '';     if(event.pagex > 0 && event.pagex < 165){         cursor_location = "cursor on left side";         // i'm doing tests should work of changing animation's speed based on cursor position         if(steps_speed_factor !== (event.pagex / 165)){             steps_speed_factor = event.pagex / 165;             steps_speed_factor = (steps_speed_factor < 0.15 ? 0.15 : steps_speed_factor);             steps_interval = 0;             startslider();         }     } else if(event.pagex > 165 && event.pagex < ($container_slider.width()-165)){         cursor_location = "cursor in center (paused)";         // stops animation, achieved way better i'm focusing on above's block of code.         steps_speed_factor = 1;         steps_interval = 3000;         $shown_slides.stop(true);         pauseslider();     } else if(event.pagex > ($container_slider.width()-165) && event.pagex < $container_slider.width()) {         cursor_location = "cursor on right side";         // exact copy (almost) of left side, since doesn't work yet, pretty  "blank" block of code         steps_interval = 0;         steps_speed_factor = ( event.pagex - ($container_slider.width() - 165) ) / 165;     }      $(".coordinates").html("x: " + event.pagex + " y: " + event.pagey );     $(".cursor_location").html(cursor_location);     $(".speed_factor").html("speed factor is: "+steps_speed_factor); });  startslider();

here codepen showing javascript code "working".

--- edit

i forgot explain propperly happens in codepen , since example didnt give importance. should happen furthier cursor center, tinier/faster invervals of animation should without losing fluidness.

in case i'm using "speed factor" calculate taking cursor's x position , comparing predefined area, converting in percentage (decimal) 15% 99%. isn't important part. i'm clueless how achieve , more try messier code gets, long can give me example of changing animation's speed (in "real" time, mean, smoothly/fluid) based on cursor's position example perfect.


Comments

Post a Comment

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

-
can configure following sample code ? when run following code, error : no entity framework provider found ado.net provider invariant name 'devart.data.sqlite' setting in machine.config <system.data> <dbproviderfactories> <add name="dotconnect sqlite" invariant="devart.data.sqlite" description="devart dotconnect sqlite" type="devart.data.sqlite.sqliteproviderfactory, devart.data.sqlite, version=4.6.287.0, culture=neutral, publickeytoken=09af7300eec23701" /> </dbproviderfactories> </system.data> after add below block code in app.config <?xml version="1.0"?> <configuration>   <configsections> <!-- more information on entity framework configuration, visit http://go.microsoft.com/fwlink/?linkid=237468 --> <section name="entityframework" type="system.data.entity.internal.configfile.entityframeworksection, entit...
Read more

c++ - Clear the memory after returning a vector in a function -

-
i have function processes , stores lot of data in , returns results vector of class. amount of data stored in function tremendous , want clear storage memory of function after finished job. necessary (does function automatically clear memory) or should clear memory function? update: vector<customers> process(char* const *filename, vector<int> id) { vector<customers> list_of_customers; (perform actions) return list_of_customers; } variables defined locally within function automatically released @ end of function scope. destructors objects called, should free memory allocated objects (if objects coded correctly). example of such object std::vector . anything you've allocated new must have corresponding delete release storage. try avoid doing own allocation , use raii instead, i.e. containers or smart pointers.
Read more

erlang - Saving a digraph to mnesia is hindered because of its side-effects -

-
updated the digraph library in erlang implements data type side-effectful. each operation on data type saves new state in ets table -- instead of returning altered version of itself, more common in functional languages. the problem usage perspective, impedes effort store or pass around state in convenient way requiring me first "collect" state before can start juggle around. the closest solution have seen far serializer/deserializer , these have drawback tied current structure of digraphs instead of operating on abstract type -- prevents future proof solution. update pascal pointed out serializer utilizes interface of digraph, , hence eliminates drawback mentioned above. better, albeit still inconvenient, see no better alternative. what recommendation on how store digraphs? should go different data type altogether? thanks. i not sure understand concern. fact digraph stored in ets transparent in user interface, might want chnge either exchange digr...
Read more