Javascript Code: Wavy Text

In order to make your website more beautiful, you should use special styles for different elements of your website. One of these elements is the titles and headlines on your website. Like this code which gives a special style to the texts or headlines. By using this code, the texts will be wavy. Interesting!

<!-- this script got from www.javascriptfreecode.com - Coded by: Krishna Eydat -->

<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;font-family:Tahoma">Javascript Free Code</a>

If you don't know how to use this code or need more information Click here!

Compatible browsers:

Tags: wave, wavy, text, effect

Javascript Best Codes

Javascript Code: Wavy Text

Links