Connecting Dots

by Michael Mandarino

HTML

<div class="timeline-wrp">
    <div class="data-wrp">
        DATA
        <div class="data-line">
            Line Pos:
            <span></span>
        </div>
        <div class="data-prePoint">
            Prev Dot Pos:
            <span></span>
        </div>
        <div class="data-curPoint">
            Current Dot Pos:
            <span></span>
        </div>
        <div class="data-nxtPoint">
            Nxt Dot Pos:
            <span></span>
        </div>
    </div>
    <div class="trigger"></div>
    <section>
        <div class="point"></div>
        <div>
            <h2>
                Hello World2
            </h2>
        </div>
    </section>

    <section>
        <div class="point"></div>
    </section>

    <section>
        <div class="point"></div>
    </section>

    <section>
        <div class="point"></div>
    </section>

    <section>
        <div class="point"></div>
    </section>

    <section>
        <div class="point"></div>
    </section>

    <section>
        <div class="point"></div>
    </section>

    <section>
        <div class="point"></div>
    </section>
</div>

SCSS

.timeline-wrp {
    max-width: 100%;
    padding: 2rem 0;
    position: relative;
}

.point {
    width: 10px;
    height: 10px;
    border: 1px solid black;
    border-radius: 100%;
    background-color: black;
    position: absolute;
    top: 50%;
}

section{
    min-height: 25vh;    
    position: relative;

    &:nth-of-type(even) {
        min-height: 50vh;
        .point {
           margin-left: 20%;
        }
    }
    &:nth-of-type(odd){
         .point {
            margin-left: 80%;
        }
    }
    &:first-of-type {
         min-height: 10vh;
         .point {
            margin-left: 80%;
        }
    }
}

.line {
    width: 100%;
    color: black;
    height: 1px;
    background-color: black;
    
    .dot {
        height: 20px;
        width: 20px;
        border-radius: 100%;
        background-color: green;
        margin-left: calc(75% - 10px);
        margin-top: -10px;
    }
}

.data-wrp {
    background-color: grey;
    display: inline-block;
    position: fixed;
    top:0;
    right: 0;
}

.trigger{
    border-top: dashed 2px red;
    height: 0;
    position: fixed;
    top: calc(50vh - 1px);
    left: 0;
    right: 0;
    z-index: -1;
}

JavaScript

function lineDistance(x, y, x0, y0) {
    return Math.sqrt((x -= x0) * x + (y -= y0) * y);
};

function drawLine(a, b, line) {
    var pointA = $(a).offset();
    var pointB = $(b).offset();
    var pointAcenterX = $(a).width() / 2;
    var pointAcenterY = $(a).height() / 2;
    var pointBcenterX = $(b).width() / 2;
    var pointBcenterY = $(b).height() / 2;
    var angle = Math.atan2(pointB.top - pointA.top, pointB.left - pointA.left) * 180 / Math.PI;
    var distance = lineDistance(pointA.left, pointA.top, pointB.left, pointB.top);

    // Set Angle
    $(line).css('transform', 'rotate(' + angle + 'deg)');

    // Set Width
    $(line).css('width', distance + 'px');

    // Set Position
    $(line).css('position', 'absolute');

    if (pointB.left < pointA.left) {
        $(line).offset({
            top: pointA.top + pointAcenterY,
            left: pointB.left + pointBcenterX
        });
    } else {
        $(line).offset({
            top: pointA.top + pointAcenterY,
            left: pointA.left + pointAcenterX
        });
    }
}
//drawLine('.dot.a', '.dot.b', '.lineAB');

var $trigger = $('.trigger');
var triggerPos = $trigger.offset().top;

var preTL = '';
var curTL = '';
var nxtTL = '';

var $sect = '';
var $sect_point = '';
var $sect_pointPos = '';


var timelineTotal = $('.timeline-wrp section').length;

$(window).on('resize', function(e) {
    $('.timeline-wrp .line').remove();

    $('.timeline-wrp section').each(function(index) {
        $sect = $(this);
        $sect_point = $sect.find('.point');

        preTL = index;
        curTL = index + 1;
        nxtTL = curTL + 1;

        $sect.addClass('sect-' + curTL);

        $sect_point.addClass('point-' + curTL)


        if (curTL > 1) {
            $sect.after('<div class="line line-' + curTL + '"><div class="dot"></div></div>');
            drawLine('.point-' + preTL, '.point-' + curTL, '.line-' + curTL);
        }

        //console.log('curentTL: ' +  curTL + ' topPos: ' +...