Javascript динамические способности колеса

Question

Я наткнулся на этот скрипт колеса, который я бы хотел реализовать. Тем не менее, мне нужно, чтобы колесные панели были динамичными. У SASS уже была переменная, но если я модифицирую ее, чтобы сказать 20, и добавьте больше элементов div, колесо покажет только 10. Это похоже на миксины, которые вычисляют угол, используют переменную $ num-sides. Я вижу дополнительные элементы, когда он загружается, но они исчезают, как только колесо коснется. Что мне не хватает?

http://codepen.io/Aldlevine/pen/yGLqd

$num-wheels: 1; 
$num-sides: 20; 
$wheel-height: 10rem; 

Answer 1

Там еще одно место, где 10 существовал и должен измениться на 20 (см комментарий в коде ниже):

$('.wheel').momentus({ 
    u: 1, 
    mass: 1000, 
    wheelRatio: -1000, 
    mouseRatio: 6, 
    onChange: function(coords, velocity){ 
    console.log('update'); 
    $('.wheel > div').each(function(i){ 
     var angle = -(coords.y/2) + (360/20)*i; // <-- CHANGE 10 to 20 HERE 
     $(this).css('transform', 'perspective(500px) rotate3d(1,0,0,'+angle+'deg) translate3d(0,0,122px)'); 
    }); 
    } 
}); 

Если вы запустите его с только что изменения, панели в колесе слишком велики. Для того, чтобы он выглядел хорошо, вы должны также уменьшить наполовину $wheel-height до 5rem.

• Demo