JSFiddle - React, Tailwind, and code Playground

by lbstr

HTML

<h1>Jared Barnett</h1>

CSS

h1 { margin: 200px; font-size:3em; }
.l { display:inline-block;}

JavaScript

$.fn.rotate = function(d){
    var s = "rotate(" + d + "deg)";
    return this.each(function(){
        $(this).css({
            "-moz-transform": s,
            "-webkit-transform": s,
            "-o-transform": s,
            "-ms-transform": s,
            "transform": s
        });
    });
};

var Ball = function($el, config){
    this.$el = $el;
    this.config = config;
    this.theta = 0;
    this.y = 0;
};

Ball.prototype.update = function(F){
    this.theta = (this.theta + 5) % 360;
    
    this.$el.rotate(this.theta);
};

$.fn.Ball = function(settings){
    return this.map(function(){
        return new Ball($(this), settings);
    });
};

var NewtonsCradle = function($el, config){
    this.$el = $el;
    this.config = config;
    
    this.init();
};

NewtonsCradle.prototype.init = function(){
    this.separate();
    this.loop();
};

NewtonsCradle.prototype.loop = function(){
    var fps = this.config.fps,
        self = this,
        i,l, balls;
    setInterval(function(){
        for (i = 0, balls = self.balls, l = balls.length; i < l; i++) {
            balls[i].update();
        }                
    }, fps);
};
    
NewtonsCradle.prototype.separate = function(){
    var $el = this.$el,
        w = $el.width(),
        h = $el.height(),
        letters = $el.text().split(''),
        a = [];
    
    $el.css({
        height: h + "px"
    });
    
    for (var i = 0, l = letters.length; i < l; i++) {
        a[i] = '<span class="l">' + letters[i] + '</span>';
    }
    $el.html(a.join(''));
    this.balls = $el.find('.l').Ball(this.config);
};


$.fn.NewtonsCradle = function(options){
    var defaults = {
        ballMass: 100,
        stringLength: 250,
        fps: 30
    };
    var config = $.extend(defaults, options || {});
    
    return this.each(function(){
        new NewtonsCradle($(this), config);
    });
};

$(document).ready(function(){
    $('h1').NewtonsCradle();
});