javascript - Shaky scale animation -
i doing little mosaic (if can call that). changing scale , opacity based on position mouse , center of picture/div.
i calculating distance via vektors
function calculatedistance(elem, mousex, mousey) { return math.floor(math.sqrt(math.pow(mousex - (elem.offsetleft + (elem.offsetwidth / 2)), 2) + math.pow(mousey - (elem.offsettop + (elem.offsetheight / 2)), 2))); }
and im looping throught divs/pictures , if distance smaller 100 , calculates opacity/scale.
but came problem , animation of changing opacity/scale little bit shakky. seems hesitating if should something.
demo = http://jsfiddle.net/trolstover/x9fpv8pb/5/
is there way or shortcut how fix called shakking or hesitating?
the biggest problem have -webkit-transition
rule in css. if try transition elements css , change value 60 times second js, flicker.
also, shouldn't add event listener every single element. cause unnecessary operations. instead, can add 1 on parent (i added nav
).
there room optimizing also, further smoothens out transition. here's result:
Comments
Post a Comment