Timeline mit GenerateBlocks statt Plugin
Eine einfache Zeitleiste besteht aus wiederholten Einträgen, einer vertikalen Linie und Markierungen für einzelne Ereignisse. Mit GenerateBlocks kannst du die Inhalte strukturiert im Editor anlegen und das visuelle Layout über CSS gestalten.
Diese Lösung eignet sich vor allem für statische oder redaktionell gepflegte Abläufe. Wenn Termine dynamisch sortiert, gefiltert oder aus einem eigenen Inhaltstyp geladen werden sollen, brauchst du zusätzlich eine passende Datenstruktur oder Query-Loop.
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
Item one
Item one
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:
First timeline item
some text
Third timeline item
some text
First timeline item
some text
Third timeline item
some text
Plugin-Solutions from wp.org (only those rated without issues by WP Hive):