Expandable gravitating list

Expandable gravitating list.markdown

Expandable gravitating list

A Pen by Matei Copot on CodePen.

License.

index.html

<textarea id=inp></textarea>

script.js

var tot = 0,
    els = [],
    frame = 0,
    increment = .04;

inp.addEventListener('keydown', function(e){
  if(!e.shiftKey && e.keyCode === 13) e.preventDefault();
  if(e.keyCode === 13 && inp.value.trim().length > 0) addText();
	
});
function addText(){
  var p = document.createElement('p');
    p.textContent = inp.value.trim();
    inp.value = '';
    
    p.style.setProperty('top', '50vh');
    p.style.setProperty('left', '50vw');
    
    ++tot;
    p.addEventListener('click', function(){
      --tot;
      document.body.removeChild(this);
      els.splice(els.indexOf(this), 1);
    });
  
  	p.addEventListener('mouseover', function(){
      increment = .01;
    })
    p.addEventListener('mouseleave', function(){
      increment = .04;
    })
    
    els.push(p);
    
    document.body.appendChild(p);
}

function anim(){
  window.setTimeout(anim, 100);
  
  frame += increment;
  var radius = tot * 5 + 100,
      part = Math.PI*2/tot;
  
  for(var i = 0; i < els.length; ++i){
    var p = els[i],
        x = Math.cos(frame + part*i) * radius - p.getBoundingClientRect().width/2,
        y = Math.sin(frame + part*i) * radius; 
    
    p.style.setProperty('left', 'calc(50vw '+ (x < 0 ? '- ' + (-x) : '+ ' + x) + 'px)');
    p.style.setProperty('top', 'calc(50vh '+ (y < 0 ? '- ' + (-y) : '+ ' + y) + 'px)');
  }
}

anim();

//setup :D
inp.value = 'new text in the middle'
addText();
inp.value = ':D'; addText();
inp.value = 'float it with Enter';
addText();
inp.value = '0.o'; addText();
inp.value = 'click to delete';
addText();
inp.value = '(^.^)'; addText();

style.css

body {
  background-color: #f65;
}
#inp:focus {
  outline: none;
  background-color: rgba(0, 0, 0, .03);
}
#inp {
  color:lightgray;
  width:100px;
  height:20px;
  background-color:transparent;
  border:none;
  text-align:center;
  border-bottom: 2px solid lightgray;
  position:absolute;
  left:calc(50vw - 50px);
  top:calc(50vh - 10px);
  color: white;
  font: 20px Verdana;
  overflow-y: hidden;
  border-top-left-radius: 5px;
  border-top-right-radius:5px;
}
p {
  position:absolute;
  transition: .2s;
  -webkit-transition: .2s;
  font:15px Verdana;
  color: #fff;
}
p:hover {
  cursor:pointer;
  font-size: 18px;
  color: #aae;
}