<!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->

<style>
#target {
    white-space: pre;
    display: inline-block;
}

#target span {
    position: relative;
    display: inline-block;
    transform-origin: left;
}
.container {
    height: 100%;
    position: relative;
        
}

.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size:30px;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"><div id="target" class="center">Javascript Free Code</div></div>
<script>
Math.easeInOutSine = function (t, b, c, d) {
        return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
};
var easing = Math.easeInOutSine,
        $target = $('#target'),
        position = $target.position(),
        width = $target.width(),
        height = 100;
$target.html($target.text().split('').map(
        function (char) {
            return '<span>' + char + '</span>';
        }
).join(''));
var $chars = $target.children();
$chars.each(function () {
        var $char = $(this),
            w = $char.width(),
            l = $char.position().left,
            offset = easing(l, 0, height, width),
            skew = offset - easing(w + l, 0, height, width),
            angle = Math.atan(skew / w) * 180 / Math.PI;
        offset = -offset;
        $char.css({
            transform: 'translateY(' + offset + 'px) skewY(' + angle + 'deg)'
        });
});
$target.css({
        paddingTop: height
});
</script>
<a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>