부모 컨테이너 안에 어린이를 보관하십시오

Question

tags cloud plugin에 약간의 애니메이션을 추가하려고합니다. 하지만 한 가지 문제가 있습니다. 어떻게 부모 컨테이너 안에 자식 요소 (태그)를 유지할 수 있습니까? 애니메이션 위치가 컨테이너 가장자리 중 하나와 겹치지 않도록하고 싶습니다.

Codepen URL : http://codepen.io/anon/pen/vgLdWV "overflow : hidden;"이라고 명시 적으로 주석 처리했습니다. 그래서 태그가 컨테이너 외부로 날아가는 것을 볼 수 있습니다.

function getRandom (max, min) { 
    return Math.floor(Math.random() * (1 + max - min) + min); 
} 

var words = [ 
     {text: "performance", weight: getRandom(2, 8)}, 
     {text: "education", weight: getRandom(2, 8)}, 
     {text: "employee", weight: getRandom(2, 8)}, 
     {text: "people", weight: getRandom(2, 8)}, 
     {text: "future", weight: getRandom(2, 8)}, 
     {text: "success", weight: getRandom(2, 8)}, 
     {text: "talent", weight: getRandom(2, 8)}, 
     {text: "career", weight: getRandom(2, 8)}, 
     {text: "strategy evaluate", weight: getRandom(2, 8)}, 
     {text: "training & development", weight: getRandom(2, 8)}, 
     {text: "learn", weight: getRandom(2, 8)}, 
     {text: "activities", weight: getRandom(2, 8)} 
    ]; 
    $('#keywords').jQCloud(words, { 
     shape: 'elliptic', 
     removeOverflowing: false, 
     afterCloudRender: function() { 



      var box = $(this); 
      var width = box.width(); 
      var height = box.height(); 
      var chute = $('span', box); 



      chute.each(function() { 
       foo($(this)); 
      }); 



      function foo($el) { 
       var $top = (Math.random() * (height - $el.height() - $el.position().top)) | 0; 
       var $left = (Math.random() * (width - $el.width() - $el.position().left)) | 0; 
       var time = Math.random() * (1200 - 400) + 400 | 0; 


       new TimelineLite({ 
        onComplete: function() { 
         foo($el); 
        } 
       }) 
       .to($el, time/100, { 
        y: $top * (Math.round(Math.random()) * 2 - 1), 
        x: $left * (Math.round(Math.random()) * 2 - 1), 
        z: getRandom(-200, 200) * (Math.round(Math.random()) * 2 - 1), 
        transformPerspective: 800, 
        force3D: true, 
        ease: SlowMo.ease.config(0.3, 0.7, false) 
       }, 'one') 
       .to($el, time/200, { 
        opacity: 1, 
        ease: SlowMo.ease.config(0.3, 0.7, false) 
       }, 'one') 
       .to($el, time/200, { 
        opacity: 0, 
        ease: SlowMo.ease.config(0.3, 0.7, false) 
       }, time/200, 'one') 
       .set($el, { 
        y: $top * (Math.round(Math.random()) * 2 - 1), 
        x: $left * (Math.round(Math.random()) * 2 - 1), 
        force3D: true 
       }); 


      } 


     } 
    }); 

Answer 1

경우 지금

$('#tagscloud').jQCloud(words, { 
     // shape: 'elliptic', 
     removeOverflowing: false, 
     afterCloudRender: function() { 
      var $box  = $(this), 
       $boxWidth = $box.width(), 
       $boxHeight = $box.height(); 

     // 
      $('span', $box).each(function() { 
       tagsMovement($(this)); 
      }); 

     // 
      function tagsMovement (el) { 
       var topY = $(el).position().top, 
        bottomY = $boxHeight - $(el).height() - $(el).position().top, 
        $top = topY >= bottomY ? -getRandom(15, topY) : getRandom(15, bottomY), 

        leftX = $(el).position().left, 
        rightX = $boxWidth - $(el).width() - $(el).position().left, 
        $left = leftX >= rightX ? -getRandom(15, leftX) : getRandom(15, rightX), 

        time  = Math.random() * (1200 - 400) + 400 | 0; 

       // var $top = (Math.random() * (height - $(el).height() - $(el).position().top)) | 0; 
       // var $left = (Math.random() * (width - $(el).width() - $(el).position().left)) | 0; 

       new TimelineLite({ 
        onComplete: function() { 
         tagsMovement($(el)); 
        } 
       }) 
       .to($(el), time/75, { 
        y: $top, 
        x: $left, 
        z: getRandom(-300, 300), 
        transformPerspective: 800, 
        force3D: true, 
        ease: Sine.easeInOut 
       }, 'one') 
       .to($(el), time/150, { 
        opacity: 1, 
        ease: Sine.easeInOut 
       }, 'one') 
       .to($(el), time/150, { 
        opacity: 0, 
        ease: Sine.easeInOut 
       }, time/150, 'one') 
       .set($(el), { 
        top: topY + $top, 
        left: leftX + $left, 
        y: 0, 
        x: 0, 
        force3D: true 
       }); 
      } 
     } 
    }); 

에 대한 here is my solution, 관심있는 사람들을