lines-draw
v1.2.0
Published
Draw html div that looks like lines
Downloads
90
Maintainers
Readme
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