RxJS (Trailing Letters)

Simple place for me to mess around with RxJS

by Josh Carroll

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<div id="letters"></div>

CSS

#letters {
  position: relative;
}

#letters span {
  position: absolute;
  font-size: 1.5em;
}

JavaScript

const Observable = Rx.Observable;

const letters = createLetters("RxJS is amazing!");
const spacing = 15;
const animationLength = 500;

Observable.fromEvent(document, 'mousemove')
	.mergeMap(({clientX, clientY}) => {
  	return Observable.from(letters)
    .mergeMap((el, i) => {
    	const left = clientX + (i*spacing) + 15;
    	const top = clientY;
  
    	return Observable.of({el, top, left})
      	.delay(i * (animationLength / letters.length));
     });
  })
  .subscribe(({el, left, top}) => {
  		el.style.top = `${top}px`;
    	el.style.left = `${left}px`;
  });

function createLetters(word){
	const target = document.getElementById('letters');

  return [...word].map(c => {
  	const el = document.createElement('span');
    el.innerText = c;
    
    target.appendChild(el);
    
    return el;
  });
}