Timeline without Plugin

by

Timeline created with Headline-Blocks & SimpleCSS

Both Headline-Blocks are inside Container. CSS is added via SimpleCSS (to create the connection line). Also added JavaScript via Hook-Element (wp_header > only use on this post):

<script>
window.addEventListener('scroll', function() {
    var el_line = document.querySelector('.timeline-heading1::after');
    var screen_pos = window.scrollY || window.scrollTop;
    var el_height = el_line.offsetHeight;
    var el_offset_top = el_line.offsetTop;

    if ((el_offset_top <= (screen_pos + window.innerHeight/2)) && ((el_offset_top + el_height) >= (screen_pos + window.innerHeight/2))){
        el_line.style.background = 'red';
    } else {
        el_line.style.background = 'grey';
    }
});
</script>

Headline 1

Headline 2

Table of Contents

1

Item one

Item one text
1
3

Item one

Item one text

In this demo, I want to show 3 container-items stacked up vertically and connected using a “timeline”. The colours of the timeline-and items (bg & text) should change on scroll.

BG-Colour Animation established via motion.page Plugin:

1

First timeline item

some text

3
4

Third timeline item

some text

1

First timeline item

some text

3
4

Third timeline item

some text

Plugin-Solutions from wp.org (only those rated without issues by WP Hive):