WIP

Draw lines in a web page with html divs.

Getting Started

    npm install lines-draw

Running the tests

TODO

Installation

    var linesDrawer = require("lines-draw");

---

Example

Line example

Define some triggers like these:

    <div class="triggers">
        <div class="trigger" id="trigger0"></div>
        <div class="trigger" id="trigger1"></div>
        <div class="trigger" id="trigger2"></div>
        <div class="trigger" id="trigger3"></div>
   </div>

Add position with css

    .triggers .trigger {
        position: absolute;
        height: 1px;
        width: 100%;
        opacity: 0;
    }

    #trigger0 {
        top: 590px;
    }
    
    #trigger1 {
        top: 710px;
    }
    
    #trigger2 {
        top: 730px;
    }
    
    #trigger3 {
        top: 910px;
    }

Define some points with the x and y coordinates

    var p1 = linesDrawer.getPoint(200,400);
    var p2 = linesDrawer.getPoint(600,400);
    var p3 = linesDrawer.getPoint(600,100);
    var p4= linesDrawer.getPoint(100,400);

Add the line

 
    linesDrawer.addLine([linesDrawer.getLine(p1,p2, "#000000"), linesDrawer.getLine(p2,p3, "#000000")]);
    linesDrawer.addLine([linesDrawer.getLine(p3,p4, "#000000")]);
    

Draw It!

 
   linesDrawer.createAllLines('#container');

Options

        'triggersContainerAppendTo': 'body',
        'triggersContainerId': '#triggers', //container where all the triggers will be created
        'animationDuration': 400, //duration for the effect when scroll in microseconds
        'triggerScroll': '#scrollTrigger' //where the trigger scroll starts to search for triggers TODO

Note

You could do this call to get your mouse coordenates(needed to determinate every point of the lines) on your page title

   linesDrawer.mouseCoordenatesOnTitle();

V2: -Responsive -Curved lines