Déplacer des divs le long d'une trajectoire circulaire sur le parchemin

Question

J'ai un conteneur div circulaire avec plusieurs divs avec du texte le long de sa circonférence. J'ai besoin de déplacer les divs de texte dans et hors de vue le long de la circonférence dans les deux sens sur le défilement.

J'ai sélectionné et décoré le conteneur div circulaire avec d3.js et l'ai placé dans un div plus petit avec le trop-plein réglé sur auto.

<div id="circle-out-container-wrapper"><div id="circle-out-container"></div></div> 

var radius = Math.floor(document.documentElement.clientHeight * 1.5); 
d3.select('#circle-out-container-wrapper') 
    .style('overflow-y', 'auto') 
    .style('overflow-x', 'hidden') 
    .style('width', '80%') 
    .style('height', '400px') 
    .style('left', '0') 
    .style('top', '0') 
    .style('position', 'absolute'); 

d3.select('#circle-out-container') 
    .style('background-color', 'transparent') 
    .style('position', 'absolute') 
    .style('box-sizing', 'border-box') 
    .style('display', 'block') 
    .style('border', '1px solid #bce8f1') 
    .style('border-radius', '50%') 
    .style('width', (radius * 2) + "px") 
    .style('height', (radius * 2) + "px") 
    .style('left', Math.floor(-(radius * 5)/3) + "px") 
    .style('top', Math.floor(-(radius * 2)/3) + "px"); 

Ensuite, j'ajoute les divs de texte et les positionne avec transform.

var params = []; 
for (var i = 30; i >= 0; i--) { 
    params.push(i); 
} 

var nums = d3.select("#circle-out-container") 
    .selectAll("div.nums") 
    .data(params) 
    .enter() 
    .append("div") 
    .attr("class", "circle") 
    .style("transform", function(d, i) { 
    var angle = 20 - (i + 1) * (70/(params.length + 1)); 
    return "rotate(" + angle + "deg) translate(" + radius + "px, 0) rotate(" + -angle + "deg)"; 
    }) 
    .text(function(d) { return d }); 

Voici comment je faire défiler le texte: divs

$('#circle-out-container-wrapper').scroll(function() { 
    b.style("transform", function(d, i) { 
    var scroll = $('#circle-out-container-wrapper').scrollTop(); 
    var angle = scroll - (i + 1) * (40/(params.length + 1)); 
    return "rotate(" + angle + "deg) translate(" + radius + "px, 0) rotate(" + -angle + "deg)"; 
    }) 
}); 

Le cercle de conteneur doit être statique avec seulement environ la moitié de celui-ci montrant. Au moment où vous faites défiler les divs de texte, vous faites défiler vers le bas le div conteneur circulaire et les changements d'arc affichés. Comment est-ce que je garde tout en place et déplace seulement les divs de texte le long du chemin circulaire quand je défile?

Voici un violon: http://jsfiddle.net/00drii/etnkLkL3/3/ Le cercle est à l'intérieur du modal.

Answer 1

Je n'ai jamais travaillé avec d3.js mais vous devez mettre la div contenant les nombres en dehors du conteneur que vous devez faire défiler.

<div id="app"> 
    <!-- container --> 
    <div id="scroll-container"> 
     <!-- content of the scroll --> 
     <div class="content"></div> 
    </div> 

    <!-- the numbers should be inside this div --> 
    <div id="canvas"> 
    </div> 
</div> 

Here you have an example code L'adapter à vos besoins.