Recent news

Tuesday, 17 May 2016

Lazy Line Painter jQuery Plugin for Path Animation Using CSS




Lazy line painter is a  jquery plugin developed for path animation using css and jQuery. This plugin have following features:
  •     Mobile friendly
  •     Responsive in nature
  •     It has size of 8kb only
How To Use
1. Add the below library reference

<link rel="stylesheet" type="text/css" href="css/common.css" media="all">
<script src="../vendor/jquery-2.1.1.min.js"></script>
<script src="../jquery.lazylinepainter-1.7.0.js"></script>
<script src="js/svgdata.js"></script>


2. Now add the below html tag.

<div class="logo-wrap">
    <div id='logo'></div>
</div>


3. Add the below code to draw patern

(function ($) {
        $(document).ready(function () {
            var $logo = $('#logo');
            /**
             * Setup your Lazy Line element.
             * see README file for more settings
             */
            $logo.lazylinepainter({
                'svgData': svgData,
                'strokeWidth': 7,
                'strokeColor': '#b5287b',
                'drawSequential': false,
                'ease': 'easeInOutQuad'
            });
            setTimeout(function () {
                $logo.lazylinepainter('paint');
            }, 10)
        })
    })(jQuery);



Pranav Singh Author: Pranav Singh

Hello, I am Author of this blog. The main purpose of this blog is to provide all the jQuery plugins which is helpful in designing and developing a web application in a single location from the web.

Previous
Next Post »

E-mail Newsletter

Sign up now to receive breaking news and to hear what's new with us.

Recent Articles