JSFiddle - React, Tailwind, and code Playground

by mackry

HTML

<div id="frost">
    <p id="silhouette">
        Ryan McLaughlin
    </p>
</div>

<p id="freewilly" class="ui-widget-content">
    Ryan McLaughlin
</p>

CSS

body { 
    background: #777;
    background: -webkit-gradient(radial, 50% 0, 800, 50% 0, 0, from(#bfbfbf), to(#EBEBEB));
    margin: 0; 
    padding: 0;
}

#frost {
    background: rgba(255,252,245,1);
    background: -webkit-gradient(radial, 50% 0, 800, 50% 0, 0, from(rgba(255,255,255,.96)), to(rgba(255,255,255,1)));
    position: absolute;
    width: 100%;
    height: 300px;
    overflow: hidden;
    top: 15%;
    z-index: 2;
    
    
    -moz-box-shadow: 0px 1px #fff, inset 0px 1px #fff; 
    -webkit-box-shadow: 0px 1px #fff, inset 0px 1px #fff;
    box-shadow: 0px 1px  #fff, inset 0px 1px #fff;
    
}
p {
    font-family: helvetica, sans-serif;
    font-size: 70px;
    text-align: center;
    letter-spacing: 2pt;
    word-spacing: 3.6pt;
}

#silhouette {
    color: transparent;
    font-size: 120px;
    position: relative;
    text-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}

#freewilly {
    position: relative;
    z-index: 1;
}

JavaScript

$(document).ready(function() {
    $('#freewilly').draggable({

        drag: function(event, ui) {
            $('#silhouette').css({ top: ($(this).position().top - ($('#silhouette').position().top * .9)), left: ($(this).position().left - ($('#silhouette').position().left * .9) ) });
        }

    });

    
    $('#frost').bind('mousewheel', function(e){
        if(e.wheelDelta/120 > 0) {
            $('#silhouette').css({fontSize: $('#silhouette')+10 });
        }
        else{
            $('#silhouette').css({fontSize: $('#silhouette')-10 });
        } 
    });

});