Thursday, 15 August 2013

scroll - Skrollr: Smooth scrolling -



scroll - Skrollr: Smooth scrolling -

i accomplish smooth scrolling when turning mouse wheel. currently, when 1 turn, scrollbar kinda jumps , animation jumpy.

example of behaviour: http://areaaperta.com/nicescroll/

can scrolling achieved using skrollr only? if so, how? tried next code

var s = skrollr.init({ render: function(data) { //debugging - log current scroll position. console.log(data.curtop); }, smoothscrolling: true, smoothscrollingduration: 500, easing: { wtf: math.random, inverted: function(p) { homecoming 1-p; } } });

but doesn't create big difference. animation little bit smoother (i.e. background slides while , stops), scrolling still jumpy.

i prefer solve skrollr think prepared instead of adding plugin.

this quote petr tichy (ihatetomatoes.net):

for smooth animations, animate inexpensive properties.

the best result you'll get, when maintain animating inexpensive css properties.

transform: scale(1.2) transform: translatex(100px) transform: rotate(90deg) opacity: 0.5

these 4 properties allow alter size, position, rotation , opacity of elements.

combination of these css properties enable create pretty much of ideas , best results.

if come across lagging , choppy scrolling animations, give animated element transform: translatez(0).

this promote element composite layers , rid of lag.

scroll parallax smooth skrollr

No comments:

Post a Comment